wake-up-neo.com

jQuery-UI-Schieberegler: Verschieben Sie den Wert entlang des Ziehpunkts

Ich habe die jQuery-UI-Schiebereglerkomponente auf meiner Seite verwendet, um einen Bereich von Preisen festzulegen. Ich kann auch ihre ui.values ​​[] verwenden, um die neuen Werte in anderen divs festzulegen und anzuzeigen.

Wie kann ich machen, um den neuen Wert unter dem Handle zu sehen . Das heißt Wenn ich das Handle auf $ 100 verschoben habe, möchte ich den Text "$ 100" direkt unter diesem Handle setzen.

Übrigens benutze ich die Range-Version, um eine Preisspanne festzulegen, sodass ich ZWEI Griffe auf meinem Slider habe (min & max).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,
        min: minPriceRange,
        max: maxPriceRange,
        step: 10,
        values: [ minPriceRange, maxPriceRange ],
        slide: function( event, ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});
15
Dan

Sie können das Dienstprogramm .position in der jQuery-Benutzeroberfläche verwenden, um die Beschriftungen zu positionieren:

$("#slider").slider({
    ...
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };

        // wait for the ui.handle to set its position
        setTimeout(delay, 5);
    }
});

Siehe es Aktion: http://jsfiddle.net/william/RSkpH/1/ .

21
William Niu

Ich würde einfach die Etiketten in die Griffe stecken, anstatt sie die ganze Zeit neu zu positionieren, wie in dieser Antwort: https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: 'slow',
    create: function() {
        $('#min').appendTo($('#slider a').get(0));
        $('#max').appendTo($('#slider a').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});

Aktualisieren

Dies funktioniert in Chromium für Linux nicht. Ein seltsamer gfx-Fehler tritt auf.

Siehe die Arbeitsdemo: http://jsfiddle.net/ohcibi/RvSgj/2/

6
ohcibi

Es ist möglich, einen Nice-Slider mit Bootstrap-Tooltips zu erstellen. Hier ist eine aktualisierte Version des Schiebereglers mit Bootstrap-QuickInfos. http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) {
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show');
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});
2
ykay

Ich verfolgte das gleiche Ziel und entschied mich für Bootstraps Tooltips. Sie können den Code auf dieser JSFiddle ausprobieren.

$('#slider').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        // Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find('a');
        var container, wait;

        // Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents('.content')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
                handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});

Hoffe es hilft jemandem.

2
Crystark

change => Dieses Ereignis wird beim Stoppen der Folie oder bei programmgesteuerter Änderung des Werts (nach der value-Methode) ausgelöst. Übernimmt die Argumente event und ui. Verwenden Sie event.originalEvent, um festzustellen, ob sich der Wert mit der Maus, der Tastatur oder programmgesteuert geändert hat. Verwenden Sie ui.value (Schieberegler mit einem Handle), um den Wert des aktuellen Handles abzurufen, $ (this) .slider ('values', index), um den Wert eines anderen Handles abzurufen.

http://docs.jquery.com/UI/Slider#event-change

2
micrub

sie finden es so einfach in der offiziellen Dokumentation der jQyeryUI-Schiebereglerseite im folgenden Beispiel

http://jqueryui.com/slider/#custom-handle

0