jQuery-UI-Auswahl - Slider- Tooltips für jeden Griff

Ich bin mit einem jQuery Range slider, damit Benutzer wählen Sie einen Zeitbereich in einem Tag (D. H. 10:00 - 18:00).

Im moment ist es alles gut funktioniert und ich habe die Ausgabe wird in einem Textfeld angezeigt, aber dies ist nicht ideal. Ich würde es vorziehen einen individuellen tooltip für jeden Griff, die 2 Werte, getrennt und Folgen Sie den Griff, wenn Sie ziehen Sie es. Andernfalls, ich könnte die Zeit, in der Folie verarbeitet werden können.

Mein problem ist - wie kann ich das Ziel einen bestimmten Griff? Sie werden dynamisch erstellt durch jQuery und sind nur definiert durch die Klassen, so weiß ich nicht, wie ich gehen über die Verknüpfung von einem div zu einem bestimmten Griff.

Hatte ich einen suchen hier und fand ein paar ähnliche Fragen, aber nichts, was wirklich beantwortet.

Auch, ich will nicht von einem plugin. Ich weiß, ein oder zwei sind vorhanden, aber da dies nur geschieht, auf einer Stelle auf der Seite, die ich lieber nicht haben, um eine Datei für etwas, das sollte ziemlich einfach sein (auch wenn es geschlagen hat mich :P)

InformationsquelleAutor ollie | 2011-06-02
  1. 2

    Wenn Sie nur den Zugriff auf jeden Wert unabhängig ist, können Sie befestigen Sie die slide Funktion zum aktualisieren jedes Ziel einzeln. Darüber hinaus, wenn Sie wollen, ändern können Sie den regler aus jeder dieser 2 Ziele getrennt, das funktioniert genauso leicht mit der values Methode.

    BEARBEITEN

    Denke ich missverstanden, deine Frage ein bisschen. Sie können die Hundeführer und Ihre Positionen mit einigen Selektoren wie:

    var offset1 = $(this).children('.ui-slider-handle').first().offset();
var offset2 = $(this).children('.ui-slider-handle').last().offset();

    Unten ist ein Beispiel, wie Sie diese Informationen verwenden, um die Anzeige von QuickInfos über diese Elemente beim ziehen.

    Beispiel: http://jsfiddle.net/niklasvh/vW7vy/

    • Vielen Dank für das Beispiel. Ich kann bereits die Aufteilung der Werte, und setzen Sie Sie in separaten Textboxen, ich könnte nicht klar gewesen sein. Ich will die einzelnen Schieberegler, um eine QuickInfo, die bewegt sich entlang der bar mit, die es enthält, dass bestimmte Schieberegler " Wert. Ich habe Probleme bei der Suche die x & y-position, jeder Griff zum aktualisieren der position des Tooltips
    • Ich habe meine Antwort aktualisiert
    • Perfekt! Vielen Dank dafür. Ich habe noch nie verwendet, erste() oder last() vor, so ist es gut zu wissen für die Zukunft zu
    • Es könnte getan werden, innerhalb der Selektor sich auch, einen Blick auf api.jquery.com/first-selector und api.jquery.com/last-selector sowie
    InformationsquelleAutor Niklas
  2. 5

    Ich weiß das ist ein bisschen alt, aber ich denke, andere Leute finden meine Lösung des Interesses (oder mir sagen, warum der Müll zumindest).

    Ich im Grunde verwendet JQuery einfügen span element innerhalb der a element, das verwendet wird, für den Griff auf den Schieberegler. Die Inhalte der span ist dann jedes mal aktualisiert, wenn der Griff bewegt wird mit dem Schieberegler s change Veranstaltung. Die Spannweite selbst ist mithilfe von css gestaltet, so dass es nur auftaucht, wenn die Maus über den Griff und ist leicht über den Griff selbst. also es sieht wie folgt aus:

    jQuery-UI-Auswahl - Slider- Tooltips für jeden Griff

    so, mein Schieberegler Hinzugefügt, um alle Elemente mit der slider-range Klasse wie folgt aus:

    $(".slider-range").each(function () {
    $(this).slider({
        range: true,
        animate: true,
        min: 1,
        max: 10,
        values: [lower, upper],
        change: function () {

            //get slider values
            var lower = $(this).slider("values", 0);
            var upper = $(this).slider("values", 1);

            //update spans with slider values
            $(this).children("a.ui-slider-handle").first().children("span").html(lower);
            $(this).children("a.ui-slider-handle").last().children("span").html(upper);
        }
    });

    //add the span element to the handle
    $(this).children("a.ui-slider-handle").html("<span class='Slider_Value'></span>");
});

    und dann das css sieht wie folgt aus:

    a.ui-slider-handle span.Slider_Value{
    position: absolute;
    top: -35px;
    left: -2px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

a.ui-slider-handle:hover span.Slider_Value{
    display: block;
}

    Und das ist alles! genießen Sie

    InformationsquelleAutor Ben
  3. 2

    Nett Bemühungen, aber es dsn ' T funktioniert perfekt. Wenn Sie die Maus bewegen Sie den Griff für die erste Zeit. Es dsnt Standard-Werte anzeigen. Versuchen Sie, diese mit gleichen CSS-Stil.

    $(function() {
            var tooltip = function(sliderObj, ui){
                val1            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 0) +'</div>';
                val2            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 1) +'</div>';
                sliderObj.children('.ui-slider-handle').first().html(val1);
                sliderObj.children('.ui-slider-handle').last().html(val2);                  
            };

            $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( e, ui ) {
                tooltip($(this),ui);                    
              },              
              create:function(e,ui){
                tooltip($(this),ui);                    
              }
            });
        });
    • Dies funktioniert Super. Meine einzige Kritik ist, dass Sie sind das hinzufügen der gleichen id zweimal.
    InformationsquelleAutor Dhanesh Mane
Schreibe einen Kommentar