Das beste jQuery UI funktioniert-Tutorial im Jahr 2024. In diesem Tutorial können Sie installieren,Weg,Ereignis, lernen
jQuery UI enthält viele kleine Teile Zustand (Widget) zu halten, deshalb ist es ein typisches jQuery-Plugin ein etwas anderes Muster verwendet. Seine Installation ist ähnlich der Installation der meisten der jQuery - Plugin, jQuery UI - Widgets basiert Teilebibliothek (Widget Factory) erstellt Widget - Bibliothek bietet eine gemeinsame API. Also, solange Sie lernen, wie man zu verwenden, wissen Sie, wie andere Widgets zu benutzen (Widget). Dieses Tutorial wird (Progressbar) Fortschrittsbalken Widget Codebeispiele beschreibt gemeinsame Merkmale.
Um den Status der Komponenten zu verfolgen, führen wir zunächst den gesamten Lebenszyklus des Widgets. Wenn das Widget installiert und Lebenszyklus beginnt. Wir müssen einfach anrufen das Plug-in auf einem oder mehreren Elementen, dh installierte Widgets.
$( "#elem" ).progressbar();
Dadurch wird jedes Element in der jQuery-Objekt, in diesem Fall das Element-ID als "Elem" initialisieren. Weil wir das nicht-Argument nennen .progressbar()
Methode ist das Widget die Standardoption in Übereinstimmung mit seiner Initialisierung. Wir können eine Reihe von Optionen, die zum Zeitpunkt der Installation übergeben, so dass die Standardoption außer Kraft setzen können.
$( "#elem" ).progressbar({ value: 20 });
Die Anzahl der Optionen bei der Installation übergeben viel nach unseren Bedürfnissen. Wir geben keine Optionen Sie die Standardwerte verwenden.
Die Optionen sind Teil eines kleinen Mitgliedstaates, so können wir auch Optionen, die nach der Installation festgelegt. Wir folgen der option
, diesen Teil des Verfahrens beschreibt.
Da das Widget initialisiert wurde, können wir den Status abfragen oder Aktionen auf das Widget ausführen. Alle Aktionen werden nach der Initialisierung in Form eines Methodenaufruf ausgeführt. Um eine Methode für das Widget aufrufen, können wir den Namen der Methode an das jQuery-Plugin übergeben. Zum Beispiel auf dem Fortschrittsbalken zu nennen (Progressbar) Widget value
Methode, sollten wir verwenden:
$( "#elem" ).progressbar( "value" );
Wenn die Methode Parameter übernimmt, können wir Parameter nach dem Methodennamen übergeben. Um zum Beispiel einen Parameter zu übergeben 40
auf den value
Methode können wir verwenden:
$( "#elem" ).progressbar( "value", 40 );
Wie andere Methoden jQuery, die meisten von den Widgets verknüpfen Methode die jQuery-Objekt zurückgibt.
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );
Jedes Widget hat seinen eigenen Satz von Widgets, die Funktionalität basierten Ansatz bieten. Es gibt jedoch Möglichkeiten, die alle gemeinsam haben, Widgets werden.
Wie wir bereits erwähnt, können wir nach der Initialisierung option
die Auswahlmethode zu ändern. Zum Beispiel können wir den Aufruf option
die Methode progressbar (Fortschrittsbalken) den Wert von 30 zu ändern.
$( "#elem" ).progressbar( "option", "value", 30 );
Bitte beachten Sie , das ist , bevor wir nennen value
Beispiele für das Verfahren ist anders. In diesem Beispiel nennen wir option
Methode, die Möglichkeit , den Wert auf 30 zu ändern.
Wir können auch den aktuellen Wert einer Option erhalten.
$( "#elem" ).progressbar( "option", "value" );
Darüber hinaus können wir geben option
übergeben , eine Objektmethode, mehrere Optionen zu aktualisieren.
$( "#elem" ).progressbar( "option", { value: 100, disabled: true });
Sie haben vielleicht bemerkt , dass option
Methode hat die jQuery - Code - Werte und Setter gleiche Flagge, wie .css()
und .attr()
. Der einzige Unterschied ist, dass Sie die Zeichenfolge "Option" als ersten Parameter übergeben müssen.
disable
Weg , um das Widget zu deaktivieren. In den Fortschrittsbalken (Progressbar) Fällen wird dies die Art zu ändern, so dass der Fortschrittsbalken deaktiviert ist.
$( "#elem" ).progressbar( "disable" );
Anruf disable
Methode entspricht die festlegen disabled
Option true
.
enable
Methode disable
umgekehrten Weg.
$( "#elem" ).progressbar( "enable" );
Rufen Sie enable
Methode entspricht die festlegen disabled
Option false
.
Wenn Sie nicht mehr das Widget benötigen, können Sie es zu zerstören, auf die ursprüngliche Marke zurück. Dies bedeutet, dass die Beendigung des Widget-Lebenszyklus.
$( "#elem" ).progressbar( "destroy" );
Sobald Sie ein Widget zerstören, können Sie jede Methode nicht rufen die Komponente, wenn Sie das Widget neu zu initialisieren. Wenn Sie das Element direkt durch entfernen möchten .remove()
, kann auch ()
oder .empty()
die Vorfahren zu ändern, wird das Widget automatisch zerstört.
Einige Widgets erzeugt Wrapper oder die Elemente zu dem ursprünglichen Element verbunden ist, getrennt. Im folgenden Beispiel wird widget
erzeugt kehrt Elemente. In dem Fortschrittsbalken (Progressbar) Beispiel erzeugt nicht den Wrapper, widget
liefert das Verfahren die ursprünglichen Elemente.
$( "#elem" ).progressbar( "widget" );
Events Alle Widgets haben eine Vielzahl von Verhaltensweisen, die mit ihnen verbunden sind, denn wenn der Zustand ändert euch wissen lassen. Für die meisten Kleinteile, wenn das Ereignis ausgelöst wird, wird der Name auf das Widget Namen als Präfix. Zum Beispiel können wir den Fortschrittsbalken () bei Änderung binden, sobald sich der Wert ändert ausgelöst.
$( "#elem" ).bind( "progressbarchange", function() { alert( "The value has changed!" ); });
Jedes Ereignis hat eine entsprechende Korrektur, als Option für Rendering. Wir können die Statusleiste verwenden (Progressbar) , um die change
Rückruf, die Bindung entspricht progressbarchange
Ereignis.
$( "#elem" ).progressbar({ change: function() { alert( "The value has changed!" ); } });
Die meisten Veranstaltungen sind für bestimmte Widgets, alle Widgets haben eine gemeinsame create
Ereignisse. Das Ereignis wird ausgelöst, wenn das Widget erstellt wird.