jQuery UI-Widgets über Widget-Bibliothek Erweiterung

jQuery UI-Widget-Bibliothek (Widget Factory) macht es einfacher, Widgets zu erstellen, diese Widgets erweitert die Funktionalität von vorhandenen Widgets. Auf diese Weise können auf der Grundlage der bestehenden leistungsfähigen Widgets erstellen können, können Sie auch eine Feineinstellung auf der bestehenden Widget-Funktion machen.

Hinweis: Bevor Sie dieses Kapitel zu studieren, müssen Sie verstehen , was ein Widget - Bibliothek (Widget Factory), und wie es funktioniert. Wenn Sie nicht vertraut mit diesem Wissen sind, so lesen Sie bitte , wie Teilebibliothek (Widget Factory) zu verwenden Abschnitt.

Erstellen Sie das Widget-Erweiterung

Erstellen Sie ein Widget von Widget - Bibliothek (Widget Factory) bis hin zu $.widget() ist der Name des Widgets übergeben und ein Prototyp - Objekt abzuschließen. Das folgende Beispiel ist ein "superDialog" Widget in der "custom" Namespace zu erstellen.

$.widget( "custom.superDialog", {} );

Zur Unterstützung der Expansion, $.widget() akzeptiert Optional als Mitglied der Eltern - Widget - Konstruktor zu verwenden. Bei der Angabe eines übergeordnetes Element, wenn es als zweites Argument übergeben wird, Objekt der Widget-Namen auf der Rückseite, vor dem Widget Prototyp.

Wie das obige Beispiel ist folgendes auch ein "superDialog" Widget in der "custom" Namespace erstellen. Aber diese Übertragung Dialog jQuery UI (Dialog) Widget - Konstruktor ( $.ui.dialog ) stellt superDialog Widget sollte jQuery UI - Dialog (Dialog) Widget als übergeordnetes Element verwenden.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Hier superDialog zwei und Dialog-Widgets sind im Wesentlichen gleichwertig, nur einen anderen Namen und Namensraum nur. Damit unser neues Widget mehr Funktionen können wir einige Methoden zu dessen Prototyp-Objekt hinzufügen.

Widget Prototyp - Objekt wird an den vergangen $.widget() letzte Argument. Bisher unserem Beispiel verwendet ein Null-Objekt. Lassen Sie uns nun ein Verfahren zum Objekt hinzufügen:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Jetzt superDialog haben eine red() Methode, die seine Textfarbe rot ändern. Bitte beachten Sie, dass die Mitgliedsbibliotheken (Widget Factory) ist , wie automatisch auf this als Widget - Instanz - Objekt. Eine Liste aller Eigenschaften und verfügbaren Methoden auf der Instanz, besuchen die Mitgliedsbibliotheken (Widget Factory) API - Dokumentation .

Erweitern bestehender Methoden

Manchmal müssen Sie das Verhalten einer bestehenden Komponente anzupassen oder Methoden hinzufügen. Sie können den Namen der Methode Name der Methode auf dem Prototyp angeben Objekt neu laden muss. Das folgende Beispiel überschreibt Dialog (Dialog) des open() Methode . Da das Dialogfeld standardmäßig aktiviert ist, wenn Sie diesen Code ausführen, "open" es wird aufgezeichnet.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

Wenn Sie diesen Code ausführen, gibt es ein Problem. Da wir überlastet open() das Standardverhalten, so dass der Dialog (Dialog) nicht mehr auf dem Bildschirm angezeigt.

Wenn wir das Prototyp-Objekt verwenden, sind wir tatsächlich die ursprüngliche Methode überlappt, ein neues Verfahren in der Prototypkette verwenden.

Damit die Eltern Montagemethoden zur Verfügung stehen, Mitglieder - Bibliothek (Widget Factory) bietet zwei Methoden - _super() und _superApply() .

Verwenden Sie _super() und _superApply() das übergeordnete Element zugreifen

_super() und _superApply() ruft in der gleichen Weise wie die übergeordnete Komponente. Betrachten Sie die folgenden Beispiele. Wie schon im letzten Instanz, die überlastet sind open() Methode , um die Aufnahme auf "open" . Doch dieser Lauf _super() wird Dialog (Dialog) des gerufenen open() , und das Dialogfeld zu öffnen.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() und _superApply() ist praktisch identisch mit dem ursprünglichen Function.prototype.call() und Function.prototype.apply() Methode. Daher _super() eine Liste von Parametern akzeptiert, _superApply() akzeptiert ein Array als Parameter. Das folgende Beispiel zeigt, dass Unterschiede zwischen den beiden.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

umdefinieren Widget

jQuery UI 1.9 hinzugefügt, um die Widget-Funktion neu zu definieren. Daher können Sie nicht ein neues Widget zu erstellen, brauchen wir nur passieren $.widget() , so dass ein vorhandenes Widget Name und Konstruktor. Die folgenden Beispiele in der open() denselben Datensatz hinzufügen, aber nicht durch ein neues Widget Erstellung abzuschließen.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

Durch diese Methode können wir einen kleinen Teil des bestehenden Verfahren verlängern, aber Sie können immer noch verwenden _super() die ursprüngliche Methode für den Zugriff auf - das sind nicht durch ein neues Widget zu schaffen abzuschließen, aber das ist direkt Widget neu definieren können.

Widgets (Widgets) und Polymorphismus (Polymorphismus)

Wenn zwischen Widgets und Plug-Ins erweitert mit ihrer Zeit zu interagieren, ist es bemerkenswert, dass das Steckelement kann nicht das übergeordnete Methode Baugruppe Element zu nennen verwendet werden. Das folgende Beispiel zeigt dies.

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Beispiele für die oben, das übergeordnete Element des Plug-in, dialog() , können Sie nicht superDialog Elemente auf den Anruf close() Methode. Für weitere Informationen rufen Sie das Widget - Methode finden Sie das Widget (Widget) Methodenaufruf .

Beispiele für eigene personalisierte

Bisher haben wir Instanzen der Widget-Prototyp Erweiterungsmethoden gesehen. Auf dem Prototyp wirkt sich überladene Methode alle Instanzen des Widgets.

Um dies zu verdeutlichen, sollten Sie die folgenden Beispiele. Dialog (Dialog) die beiden Kräfte gleich verwenden open() Methode.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

Manchmal müssen Sie nur das Verhalten einer Instanz des Widgets zu ändern. Um dies zu tun, müssen Sie eine normale Attributierung JavaScript zu verwenden, einen Verweis auf Instanzen erhalten und diese Methode überschreiben. Als spezifische Beispiele weiter unten.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Überladene Technische Personalisierung ist das perfekte Beispiel für eine einmalige Anpassung.