numerischen Wert auf andere Art und Weise darstellen. Das Plugin unterstützt noch zwei weitere Optionen, die wir in diesem Beispiel nicht genutzt haben: Option animate: true animiert den Handle, wenn er durch ein Klicken irgendwo im Slider an ein »Ziel« bewegt wird. Option orientation: vertical zeigt anstelle eines horizontalen einen vertikalen Slider an. Es gibt noch ein paar weitere Events, die eine detailliertere Steuermöglichkeit bieten: start wird aufgerufen, wenn das Verschieben beginnt. stop wird am Ende des Verschiebens aufgerufen. change wird aufgerufen, wenn das Verschieben beendet ist und sich der Wert des Sliders verändert hat. Dies ist besonders dann nützlich, wenn eine Änderung des Sliders eine teure Aktion auslöst, wie zum Beispiel das Abschicken einer Anfrage an den Server oder das Anpassen eines Graphen. Natürlich wird das Verhalten des Sliders dadurch weniger offensichtlich, da man dann beim Verschieben keine direkte Rückmeldung erhält.
Einen Wert eingeben, der innerhalb bestimmter Grenzen liegt Problem Ein Slider ist wunderbar dafür geeignet, grob Daten einzugeben und sie zu visualisieren, für exakte Werte hingegen ist er nicht so nützlich. Ein Beispiel wäre ein Pixel-Wert in einer Layout-Komponente, bei der der Wert in sehr kleinen Schritten verändert werden muss – Pixel für Pixel. Bei einem Standard-Eingabefeld muss die Tastatur genutzt werden – der aktuelle Wert wird gelöscht und ein neuer eingegeben, bei jedem Schritt. Lösung Das Spinner-Widget von jQuery UI kann dieses Problem lösen, indem es dem Eingabefeld Buttons für das Erhöhen und Verringern des Wertes hinzufügt. So kann man mit der Maus arbeiten, aber auch die Cursor-Tasten benutzen. Sie brauchen dazu nur ein normales Eingabefeld:
Auf das wenden Sie dann das Spinner-Plugin an: $("#value").spinner(); Damit werden die Buttons für das Hoch- und Runterblättern erzeugt, platziert und die notwendigen Tastatur-Events hinzugefügt. Zudem wird die Eingabe auf numerische Werte beschränkt – gibt man im Spinner-Feld abc ein, dann wird dies beim Verlassen des Feldes durch den Standardwert ersetzt. Definiert man keinen eigenen, ist der Wert Null. Diskussion Das Plugin bietet ein paar Möglichkeiten an, die Eingabe weiter zu beschränken: min setzt die untere Grenze, zum Beispiel −10 oder 100. max setzt die obere Grenze, zum Beispiel 10 oder 200. stepping gibt gewisse Sprungwerte vor, zum Beispiel 5. Standard ist 1. Wird der Spinner genutzt, um einen Währungsbetrag einzugeben, kann die Option currency genutzt werden, um das passende Symbol innerhalb des Eingabefeldes anzuzeigen. Das folgende Beispiel nutzt all diese Features und zeigt eine Form an, mit der Geld gespendet werden kann:
Wir haben ein Select-Feld für die Währung und ein Texteingabefeld für den Betrag: var currency = $("#currency").change(function() { $("#amount").spinner("option", "currency", $(this).val()).blur(); }); $("#amount").spinner({ currency: currency.val(), min: 5, max: 1000, step: 5 }); Wir binden ein Change-Event an das Währungs-Select-Feld, um die Option currency des Spinner-Feldes bei einer Auswahl der Währung anzupassen. Das Spinner-Feld selbst wird mit dem aktuellen Wert initialisiert, es werden aber auch Angaben für min , max und step gemacht und die Werte auf den Bereich von 5 bis 1.000 beschränkt, wobei immer nur in Fünferschritten erhöht werden kann. Integration mit Google Maps Der Wert kann auch eine Dezimalzahl sein, wofür man die Option decimal nutzen kann, um die Anzahl der Nachkommastellen festzulegen. Im folgenden Beispiel zeigen wir eine Google Map an und nutzen Spinner, um Länge und Breite anzugeben. Zunächst binden wir die API-Skripten von Google Maps ein:
Dann können wir Markup für die Spinner und die eigentliche Karte sowie ein paar einfache Styles hinzufügen:
Kostenlos Online Lesen 
