web-dev-qa-db-fra.com

Étiquettes du curseur jQuery UI sous le curseur

Je suis limité à utiliser jQuery 1.4.2 et jQuery ui 1.8.5 (ce n'est pas par choix, ne me demandez pas de passer aux dernières versions). J'ai créé un curseur qui affiche la valeur actuelle au-dessus de la barre de défilement, mais ce dont j'ai besoin maintenant est un moyen de remplir une légende sous la barre de défilement distancée de la même manière que le curseur (c'est-à-dire si le curseur a une largeur de 100 pixels et qu'il y a cinq valeurs le curseur s'alignera tous les 20 pixels. Dans cet exemple, j'aimerais que les valeurs de la légende soient placées à des intervalles de 20 pixels).

Voici un exemple de ce que je veux:

Slider

Voici la jQuery que j'ai (assimilée à la page de démonstration du curseur ui):

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
jqueryjquery-uijquery-ui-slider
37
Richard Parnaby-King

Pour créer une légende, nous devons connaître la largeur du curseur et le nombre d'éléments puis les diviser l'un par rapport à l'autre:

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.Push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

La balise p doit avoir le style 'display: inline-block' pour un rendu correct, sinon chaque étiquette prendra une ligne ou les étiquettes seront empilées les unes à côté des autres.

J'ai créé un article expliquant le problème et la solution: jQuery UI Slider Legend Under Slider qui contient une démo en direct de ce travail.

21
Richard Parnaby-King

Les solutions publiées sont totalement réalisables, mais voici une autre solution qui ne nécessite aucun plugin supplémentaire et qui produit cela (voir violon ):

a slider with simple labels

Voici comment procéder:

  1. Lancez le curseur.

  2. Pour chacune des valeurs possibles, ajoutez un élément label avec position: absolute (le curseur est déjà position: relative, de sorte que les étiquettes seront positionnées par rapport au curseur).

  3. Pour chaque label, définissez la propriété left sur un pourcentage.

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

// A slider with a step of 1
$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
.each(function() {

    // Add labels to slider whose values 
    // are specified by min, max

    // Get the options for this slider (specified above)
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Position the labels
    for (var i = 0; i <= vals; i++) {

        // Create a new element and position it with percentages
        var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%');

        // Add the element inside #slider
        $("#slider").append(el);

    }

});
64
chrisfargen

Je cherchais la même chose et j'ai fini par utiliser le jQuery UI Slider par filamentgroup (Cela fonctionne comme un charme et semble stable) Je pense qu'avec le temps, il est prévu de fusionner avec jQuery UI Composants...

ici une référence à l'article et à l'exemple + jsfiddle minimisé que j'ai fait

jQuery UI Slider à partir d'un élément Select - maintenant avec le support ARIA

Ceci est un exemple tiré de l'article du Filament Group Lab

Exemple de travail jsfiddle minimisé - Mis à jour et fonctionnel

b.t.w si l'on veut utiliser un curseur plus simple (sans plage) tout ce qu'il faut faire est de supprimer le deuxième élément select

Un autre plugin sympa qui fait le travail: jslider

12
Daniel

Encore une solution avec des étiquettes personnalisées et sans taille d'étiquette fixe.

JS Bin

7
Nazar Tereshkovych

J'ai une solution simple pour un curseur avec des étiquettes utilisant uniquement jquery.

enter image description here

Vous configurez simplement votre div où vous voulez que le curseur aille

<div class="sliderWithLabels" id="mySlider1"></div>

Appelez ensuite la méthode de configuration qui ajoutera les étiquettes au curseur aux index appropriés.

// setupSlider(divId, labelArray, initialIndex);
setupSlider('mySlider3', ["label1", "label2", "label3", "label3"], 3);

voir le stylo code ci-dessous pour le code complet

https://codepen.io/larnott/pen/WNeErqE

0
user3284707