Afficher les intervalles numérotés ci-dessus jQuery curseur

Question

Hallo,

J'ai ajouté un curseur jQuery et maintenant je veux avoir des chiffres au-dessus du curseur qui indique les intervalles. Presque comme une règle de tous les jours. Quelqu'un at-il une méthode rapide pour accomplir cela?

Answer 1

Jetez un oeil à ce plugin jQuery UI: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Il est en fait une version plus sophistiquée de l'interface utilisateur jQuery curseur créé par les mêmes personnes qui sponsorise jQuery UI. Cependant, ceci utilise l'élément HTML select au lieu des listes, donc vous pouvez enlever la fonction d'ajout de tic du plugin et l'utiliser à la place (pas facile, mais c'est mieux que d'écrire le vôtre, j'espère!).

C'est ce que le plugin utilise:

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)'); 
jQuery(selectOptions).each(function(i){ 
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ; 
    var labelText = (options.labelSrc == 'text') ? this.text : this.value; 
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>'); 
}); 

Pour chaque élément option il ajoute un tic, avec une étiquette ajoutée par un autre bloc de code plus bas. Ce qu'il fait est fondamentalement l'injection d'une liste de spans dans l'élément curseur, avec le texte pris directement à partir de l'attribut de valeur de l'élément. Vous aurez également besoin d'un peu de CSS pour le style correctement dans les tics.

Answer 2

J'utilise ce code.
img/current.png - chemin vers l'image actuelle, quand je presse sur Cliquez)

function setSlider(selected) { 
$('.slider_item > img').remove(); 
$(selected).html('<img src="img/current.png">'+$(selected).html()); 
} 



<div class="line"> 
     <span onclick="setSlider(this);" class="slider_item left"> 
      0.5 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      1 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      2 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      4 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      8 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      16 
     </span><span onclick="setSlider(this);" class="slider_item right"> 
      32 
     </span> 
    </div>