JQuery Kochbuch (German Edition)

angewandt und es sind keine Optionen notwendig:


$("#slider").slider();
    Damit dies funktioniert, müssen jQuery, jQuery UI Core und die Slider-
.js
-Dateien sowie ein UI-Theme eingebunden werden:






    Das bringt zwar einen hübsch aussehenden Slider auf die Seite, aber sehr nützlich ist er noch nicht.
    Bei der Auto-Suche wollen wir die selektierten Werte in ein Eingabefeld übertragen und dem Anwender präsentieren:

    Preisbereich:
    

    Mit diesem Markup können wir einen Bereichs-Slider erstellen:
var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function(event, ui) {
     $("#amount").val('€ ' + ui.values[0] + ' − € ' + ui.values[1]);
    }
});
$("#amount").val('€ ' + slider.slider("values", 0) + ' − € ' + slider.slider("values",
1));
    Wenn man die Option
range
auf
true
setzt, weiß das Plugin, dass zwei Handles erzeugt werden sollen und nicht nur einer. Die Optionen
min
und
max
legen den verfügbaren Bereich fest und die Option
values
gibt die Ausgangsposition an.
    Der Callback
slide
wirdausgelöst, wenn ein Handle bewegt wird. Hier aktualisiert er das Eingabefeld
amount
, um den selektierten Bereich anzuzeigen.
    Diskussion
    Einen Slideran ein Texteingabefeld zu binden, ist eine Option – die andere ist, ihn an ein Select-Feld zu binden und die Optionen des Select-Feldes als Werte zu nutzen.
    Lassen Sie uns als Beispiel eine Form zur Zimmerreservierung nutzen, bei der der Anweder die minimale Anzahl an Betten eingeben kann. Die maximale Zahl ist sechs, daher ist ein Slider keine ganz schlechte Idee. Mit progressiver Optimierung können wir das Select durch einen Slider »verbessern« und die Änderungen wiederum in das

-Element übertragen:

    1
    2
    3
    4
    5
    6


var select = $("#minbeds");
var slider = $('').insertAfter(select).slider({
    min: 1,
    max: 6,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
     select[0].selectedIndex = ui.value − 1;
    }
});
$("#minbeds").click(function() {
    slider.slider("value", this.selectedIndex + 1);
});
    Anstatt bestehendes Markup zu verwenden, das noch nicht einmal eine semantische Bedeutung besitzt, generieren wir das