Wie man jQuery UI-Widget-Bibliothek verwenden
Wir werden ein Fortschrittsbalken erstellen. Wie in den folgenden Beispielen gezeigt, die durch den Aufruf jQuery.widget() abgeschlossen ist , dauert es zwei Parameter: ein Plug-In - Namen erstellt werden soll, ein Text, der das Objekt enthält eine Funktion von Plug-in ist die Unterstützung. Wenn der Stecker genannt wird, erzeugt er einen neuen Plug-in Beispiel werden alle Funktionen im Rahmen dieses Beispiels durchgeführt werden. Diese zwei wichtige Möglichkeiten, verschiedene Standard-jQuery-Plugin. Zunächst ist der Kontext ein Objekt, kein DOM-Element. Zweitens ist der Kontext immer ein einzelnes Objekt, nicht eine Sammlung.
$.widget( "custom.progressbar", {
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Muss der Name des Plugins Namensraum, in diesem Beispiel enthalten, verwenden wir einen custom Namespace. Sie können nur eine Schicht tiefer Namespace zu erstellen, daher custom.progressbar ist ein effektives Plugin-Name, very.custom.progressbar keine gültige Plug-in - Namen.
Wir sahen Teilebibliothek (Widget Factory) bietet uns zwei Eigenschaften. this.element ist ein jQuery - Objekt enthält ein Element. Wenn wir das Plug-in jQuery - Objekt aufrufen , die mehrere Elemente enthält, wird es ein separates Plug-in - Instanz für jedes Element zu erstellen, und jede Instanz wird seine eigene haben this.element . Die zweite Eigenschaft, this.options , ist ein Plug-in - Optionen alle wichtigen Namen / Wert - Paare Hash enthalten (Raute). Diese Optionen können Plug-in übergeben werden, wie folgt:
$( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
Wenn wir nennen jQuery.widget() , die , indem sie jQuery.fn (verwendet , um ein Standard - Plug-in - System zu erstellen) fügen Sie die Funktion jQuery zu erweitern. Funktionsname basiert auf Ihren Pass hinzugefügt jQuery.widget() Name ohne den Namespace - "progressbar". Plug-Pass-Option wird der Wert in der Plugin-Instanz zu erhalten. Wie im folgenden Beispiel gezeigt wird, können wir einen Standardwert auf jede Option angeben. Wenn Ihr API entwerfen, sollten Sie sich der häufigste Verwendung von Plug-in sein, so können Sie den entsprechenden Standard festgelegt, und stellen Sie sicher, dass alle Optionen wirklich optional.
$.widget( "custom.progressbar", {
// Default options.
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Rufen Sie die Plug-in-Methoden
Jetzt können wir unsere Fortschrittsbalken zu initialisieren, werden wir eine Aktion durch den Aufruf der Methode auf der Plugin-Instanz durchführen. Um ein Plug-In - Verfahren zu definieren, wir wir nur passieren jQuery.widget() Verweis auf eine Funktion Objekt. Wir können auch mit einem Unterstrich Präfix "private" Methode, um die Funktionsnamen definieren.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
},
// Create a public method.
value: function( value ) {
// No value passed, act as a getter.
if ( value === undefined ) {
return this.options.value;
}
// Value passed, act as a setter.
this.options.value = this._constrain( value );
var progress = this.options.value + "%";
this.element.text( progress );
},
// Create a private method.
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Um eine Methode auf einem Plug-in-Instanz aufrufen, können Sie den Namen der Methode an das jQuery-Plugin übergeben. Wenn Sie eine Methode aufrufen, Parameter zu übernehmen, übergeben Sie einfach den Namen der Methode hinter dieser Parameter.
Hinweis: Die jQuery - Funktion wird auf dem gleichen Methodennamen übergeben verwendet , um das Plug-in initialisieren , um das Verfahren durchzuführen. Dies wird getan, um die jQuery-Namespace Verschmutzung zu verhindern, während die Kette Methodenaufrufe beibehalten wird. In den nachfolgenden Kapiteln werden wir andere Verwendungen natürlicher aussehen zu sehen.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
// Get the current value.
alert( bar.progressbar( "value" ) );
// Update the value.
bar.progressbar( "value", 50 );
// Get the current value again.
alert( bar.progressbar( "value" ) );
Verwenden Sie die Optionen
option() Methode wird automatisch an die Plug-In zur Verfügung gestellt. option() Methode ermöglicht es Ihnen , und legen Sie die Optionen nach der Initialisierung zu erhalten. Das Verfahren , wie jQuery .css() und .attr() Methode: Sie haben nur einen Namen passieren können als das Argument zu verwenden ist, können Sie auch einen Namen und Wert als Satz übergeben Sie einen Schlüsselnamen / Wert - Paare unter Verwendung oder Weitergabe Hash mehrere Werte zu setzen. Wenn als Wert verwendet wird, ein Plug-in gibt den Namen des eingehenden Option aktuellen Wert entspricht. Wenn sie als Setter verwendet, Widget _setOption wird Methode aufgerufen werden für jede Option eingestellt ist. Wir können ein Plug-in in unserem angeben _setOption Methode , um die Optionen ändern zu reflektieren. Ändern Sie die Optionen für Maßnahmen unabhängig voneinander durchgeführt werden, können wir außer Kraft setzen _setOptions .
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
In Rückruf
Die einfachste Erweiterung ist eine Callback hinzufügen, so dass die Benutzer reagieren können, wenn Änderungen in der Plug-in-Zustand auftreten. Wir können auf das folgende Beispiel aussehen wie einen Rückruf an den Fortschrittsbalken hinzuzufügen, wenn der Fortschrittsbalken 100 Prozent erreicht. _trigger() Methode hat drei Argumente: den Namen des Callback, einen Rückruf jQuery Event - Objekte gestartet und ein Hash der mit dem Ereignis verknüpfte Daten. Rückruf Name ist der einzige Parameter ist erforderlich, wollen aber benutzerdefinierte Funktionen Benutzer auf Plug-in, die anderen Parameter sind sehr nützlich, zu implementieren. basierend auf dem Objekt zur Verfügung gestellt durch die x / y-Koordinaten des Drag Zum Beispiel, wenn wir ein ziehbar Plugin erstellt haben, können wir mousemove- Drag-Ereignis übergeben, wenn die Callback ausgelöst, die Benutzer auf das Ereignis reagieren können. Bitte beachten Sie bestanden _trigger() des ursprünglichen Ereignisses muss anstelle eines nativen Browser Ereignisse ein jQuery - Ereignis sein.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Callback-Funktion im Wesentlichen nur eine zusätzliche Option, so dass Sie die gleiche wie die anderen Optionen erhalten können und stellen Sie sie. Jedes Mal, wenn Rückruf, wird es eine entsprechende Ereignis ausgelöst wird. Der Ereignistyp ist mit Namen und den Namen der Callback-Funktion, um den Anschlussstecker zu bestimmen. Callback-Ereignis akzeptieren und die gleichen zwei Argumente: ein Ereignisobjekt und einen Hash der Daten mit dem Ereignis verknüpft ist, insbesondere wie in den folgenden Beispielen gezeigt. Sie können ein Plug-In-Funktionen umfassen müssen Benutzer zu verhindern, um dies zu tun, ist der beste Weg, um Liebe zu schaffen Sie Rückrufe widerrufen kann. Benutzer Rückruf oder ein Ereignis widerrufen kann zu einer nativen im Zusammenhang mit ihnen jeden Fall widerrufen, sind sie durch den Aufruf event.preventDefault() oder Rückkehr false zu erreichen. Wenn Sie Rückruf widerrufen, _trigger() wird Methode zurückkehren false , so können Sie die entsprechende Funktion in den Plug-Ins erreichen.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
alert( "Callbacks are great!" );
}
})
.bind( "progressbarcomplete", function( event, data ) {
alert( "Events bubble and support many handlers for extreme flexibility." );
alert( "The progress bar value is " + data.value );
});
bar.progressbar( "option", "value", 100 );
Natur
Nun haben wir gesehen, wie die Widget-Bibliothek (Widget Factory) zu verwenden, um ein Plug-in zu erstellen, schauen wir uns an, wie es tatsächlich funktioniert. Wenn Sie anrufen jQuery.widget() , erstellt es eine Konstruktorfunktion für das Plug-in und stellen Sie Ihre Plugin - Instanz als Prototyp - Objekt übergeben wird. Alle Funktionen werden automatisch hinzugefügt , um das Widget von einem grundlegenden Widget ein Prototyp kommt, definiert als jQuery.Widget.prototype . Wenn Sie ein Plug-in - Instanz erstellen verwendet werden jQuery.data speichert sie auf dem ursprünglichen DOM - Element, Plug-in - Namen als Schlüssel Namen.
Da das Plugin-Instanz direkt mit dem Element DOM verbunden sind, können Sie direkt das Plug-in zugreifen Instanz, ohne die Notwendigkeit, die Plug-in-Verfahren zu durchlaufen. Diese Methode ermöglicht es Ihnen, direkt auf den Plug-in-Instanz anzurufen, ohne die Notwendigkeit, einen String-Methodennamen zu übergeben, und Sie können auch auf Eigenschaften direkt anschließen.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar()
.data( "progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
// Access properties on the plugin instance.
alert( bar.options.value );
Sie können auch eine Instanz des Plug-in ohne Traversal Methoden zu erstellen, und die Möglichkeit, direkt mit den Konstruktor Elemente zu nennen:
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
// Same result as before.
alert( bar.options.value );
Erweiterung des Prototyps
Widget Konstrukteure und Prototypen größte Vorteil ist einfach Erweiterungen. Durch das Hinzufügen oder die Methode Plug Prototyp ändern, können wir das Widget Verhalten aller Instanzen ändern. Zum Beispiel, wenn wir eine Methode, um die Fortschrittsanzeige zurückgesetzt auf 0% Fortschritt hinzufügen wollen, können wir diese Methode, um den Prototyp hinzuzufügen, die sich auf alle Plug-in-Instanz aufgerufen wird.
$.custom.progressbar.prototype.reset = function() {
this._setOption( "value", 0 );
};
Für die erweiterte Widgets für mehr Details und wie ein neues Widget auf einem bestehenden Widget mehr Details zu erstellen, finden Sie in der erweiterten Widget (Widget) von Mitgliedsbibliotheken (des Widget Factory) .
aufklären
In einigen Fällen kann die Anwendung dem Benutzer, Plug-Ins, und dann die Anwendung abzubrechen. Sie können _destroy() diese Methode zu tun. In _destroy() innerhalb einer Methode, sollten Sie alle Aktionen während der Initialisierung und post-Einsatz - Plug-ins widerrufen. _destroy() durch .destroy() -Methode aufgerufen wird, .destroy() ist Methode ein Plug-in Fällen , wenn ein Element aus dem DOM - Verbindungen automatisch aufgerufen zu entfernen, so kann es für die Garbage Collection verwendet werden. Grund .destroy() Methode wird auch häufig verwendet , um mit einigen Bereinigungsvorgänge zu behandeln, wie das DOM - Element aus dem Widget - Instanz zu entfernen zitiert, unbind Widget Namespace alle Ereignisse aus den Elementen, verwenden unbind alle _bind() Ereignisse hinzuzufügen.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
Schließen Notizen
Component Library (Widget Factory) ist eine Möglichkeit, einen Zustand für den Stecker zu schaffen. Es gibt verschiedene andere Modelle verwendet werden können, und jeder hat seine eigenen Vorteile und Nachteile. Component Library (Widget Factory) löst viele gemeinsame Probleme und verbessert die Effizienz, sondern auch die Wiederverwendbarkeit des Codes erheblich verbessern, so dass es für jQuery UI und andere dem Stand der Plug-Ins.
Beachten Sie, dass wir in diesem Abschnitt verwenden custom Namespace. ui Namespace offiziellen jQuery UI - Plugin vorbehalten. Wenn Sie Ihre eigenen Plug-Ins erstellen, sollten Sie Ihren eigenen Namensraum erstellen. Um so deutlicher, von dem Stecker, der dem Bereich gehört.