jQuery UI funktioniert

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.

installieren

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.

Weg

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" );

Öffentliche Methode

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.

Option

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.

deaktivieren

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 .

ermöglichen

enable Methode disable umgekehrten Weg.

$( "#elem" ).progressbar( "enable" );

Rufen Sie enable Methode entspricht die festlegen disabled Option false .

vernichten

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 .html() oder .empty() die Vorfahren zu ändern, wird das Widget automatisch zerstört.

Widget

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" );

Ereignis

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!" );
    }
});

Öffentliche Veranstaltungen

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.