jQuery UI Slider Labels Under Slider

Sono limitato all’utilizzo di jQuery 1.4.2 e jQuery ui 1.8.5 (questo non è per scelta, per favore non chiedetemi di aggiornare alle ultime versioni). Ho creato un dispositivo di scorrimento che mostra il valore corrente sopra la barra di scorrimento, ma quello di cui ho bisogno ora è un modo per popolare una legenda sotto la barra di scorrimento distanziata come il cursore (cioè se il cursore è largo 100 px e ci sono cinque valori il cursore scatterà ogni 20 px. In questo esempio, vorrei che i valori nella legenda fossero posizionati a intervalli di 20px).

Ecco un esempio di ciò che voglio:

Slider

Ecco il jQuery che ho (assimilato dalla pagina demo del cursore ui):

//select element with 5 - 20 options var el = $('.select'); //add slider var slider = $( '
' ).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.

    Le soluzioni pubblicate sono totalmente realizzabili, ma ecco un’altra soluzione che non richiede plug-in aggiuntivi e produce questo (vedi fiddle ):

    un cursore con etichette semplici

    Ecco come farlo:

    1. Inizia il cursore.

    2. Per ciascuno dei possibili valori, aggiungi un elemento label con position: absolute (il cursore è già position: relative , quindi le etichette saranno posizionate rispetto al cursore).

    3. Per ogni label , imposta la proprietà left su una percentuale.

    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 = $('').css('left', (i/vals*100) + '%'); // Add the element inside #slider $("#slider").append(el); } }); 

    Per creare una legenda, dobbiamo conoscere la larghezza del cursore e il numero di elementi, quindi dividere l’uno contro l’altro:

     //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('

    ' + options.join('

    ') +'

    ');

    Il tag p deve avere lo stile ‘display: inline-block’ per renderlo correttamente, altrimenti ogni etichetta prenderà una riga o le etichette saranno accatastate l’una accanto all’altra.

    Ho creato un post che spiega il problema e la soluzione: jQuery UI Slider Legend Under Slider che contiene una demo live di questo lavoro.

    Sono stato alla ricerca della stessa cosa e ho finito con l’uso del jQuery UI Slider di filamentgroup (Funziona come un fascino e sembra stabile) Penso che col tempo si pianifichi di fondersi in componenti dell’interfaccia utente jQuery …

    qui un riferimento all’articolo ed all’esempio + jsfiddle minimizzato che ho fatto

    jQuery Slider UI da un elemento Select – ora con supporto ARIA

    Questo è un esempio del Filament Group Lab Article

    Esempio di lavoro ridotto a icona jsfiddle – Aggiornato e funzionante

    btw se si vuole usare un cursore più semplice (senza intervallo) tutto ciò che è necessario fare è rimuovere il secondo elemento select


    Un altro bel plugin che fa il lavoro: jslider

    Un’altra soluzione con etichette personalizzate e senza dimensioni fisse dell’etichetta.

    JS Bin