widgets jQuery UI par agrandissement de la bibliothèque de widgets

widget de jQuery UI bibliothèque (Widget Factory) rend plus facile de créer des widgets, ces widgets étend la fonctionnalité des widgets existants. De cette façon, vous pouvez créer sur la base des widgets puissants existants, vous pouvez également effectuer des réglages fins sur la fonction widget existant.

Remarque: Avant d' étudier ce chapitre, vous devez comprendre ce qu'est une bibliothèque widget de (Widget Factory), et comment il fonctionne. Si vous n'êtes pas familier avec cette connaissance, donc s'il vous plaît examiner la façon dont la bibliothèque de pièces (Widget Factory) à utiliser la section.

Créer l'extension widget

Créer un widget par la bibliothèque de widgets (Widget Factory) grâce à $.widget() est passé le nom du widget et un objet prototype pour terminer. L'exemple suivant est de créer un widget "superDialog" dans l'espace "personnalisé".

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

Pour soutenir l'expansion, $.widget() en option acceptée comme membre d'utiliser le constructeur de widget parent. Lors de la spécification d'un membre parent quand il est passé comme second argument, le nom du widget sur le dos, en face de l'objet widget prototype.

Comme dans l'exemple ci-dessus, ce qui suit devrait également créer un widget "superDialog" dans l'espace "personnalisé". Mais ce transfert est de dialogue (dialogue) widget jQuery UI constructeur ( $.ui.dialog ), représente un widget superDialog devrait utiliser dialogue (dialogue) le widget jQuery UI en tant que membre parent.

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

Ici, superDialog deux et widgets de dialogue sont essentiellement équivalents, juste un nom différent et espace de noms seulement. Pour nos nouveaux widgets plus de fonctionnalités, nous pouvons ajouter quelques méthodes à son objet prototype.

objet prototype Widget est passé à la $.widget() dernier argument. Jusqu'à présent, notre exemple utilise un objet null. Maintenant, nous allons ajouter une méthode à l'objet:

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

Maintenant superDialog ont un red() méthode, qui va changer sa couleur rouge texte. S'il vous plaît noter que les bibliothèques membres (Widget Factory) est comment définir automatiquement this comme un objet d'instance de widget. Pour une liste de toutes les propriétés et méthodes disponibles sur l'instance, visiter les bibliothèques membres (Widget Factory) documentation de l' API .

Etendre les méthodes existantes

Parfois, vous avez besoin d'ajuster le comportement d'un composant existant ou ajouter des méthodes. Vous pouvez spécifier le nom du nom de la méthode de la méthode sur le prototype objet doit recharger. L'exemple suivant boîte de dialogue (de dialogue) de la remplace open() méthode . Parce que la boîte de dialogue est activée par défaut, lorsque vous exécutez ce code, "open" il sera enregistré.

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

Lorsque vous exécutez ce code, il y a un problème. Puisque nous sommes surchargés open() le comportement par défaut, de sorte que la boîte de dialogue (dialogue) ne sont plus affichées à l'écran.

Lorsque nous utilisons l'objet prototype, nous sommes recouvre en fait la méthode originale, en utilisant une nouvelle méthode dans la chaîne de prototype.

Pour que le parent méthodes d'assemblage sont disponibles, bibliothèque membre (Widget Factory) fournit deux méthodes - _super() et _superApply() .

Utilisez _super() et _superApply() pour accéder au membre parent

_super() et _superApply() appelle de la même manière que le composant parent. Considérons les exemples suivants. Comme la dernière instance, qui sont en surcharge open() méthode pour enregistrer le "open" . Cependant, cette course _super() est dialogue (dialogue) a appelé de l' open() , et la boîte de dialogue Ouvrir.

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

_super() et _superApply() est pratiquement identique à l'original Function.prototype.call() et Function.prototype.apply() méthode. Par conséquent, _super() accepte une liste de paramètres, _superApply() accepte un tableau en tant que paramètre. L'exemple suivant montre que la différence entre deux.

$.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 );
    }
});

Redéfinir un widget

jQuery UI 1.9 ajouté redéfinir la fonction widget. Par conséquent, vous ne pouvez pas créer un nouveau widget, nous avons seulement besoin de passer $.widget() de telle sorte que le nom et le constructeur du widget existant. Les exemples suivants dans l' open() pour ajouter le même enregistrement, mais pas par la création d' un nouveau widget pour terminer.

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

Grâce à cette méthode, nous pouvons étendre une petite partie de la méthode existante, mais vous pouvez toujours utiliser _super() pour accéder à la méthode originale - ceux - ci ne sont pas en créant un nouveau widget pour terminer, mais qui est directement redéfinir un widget peut.

Widgets (Widgets) et le polymorphisme (Polymorphism)

Une fois étendu entre les widgets et les plug-ins d'interagir avec leur temps, il est à noter que l'élément de bouchon ne peut pas être utilisé pour appeler l'élément méthode parent de sous-ensemble. L'exemple suivant illustre cela.

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

Des exemples de ce qui précède, le membre parent du plug-in, dialog() , vous ne pouvez pas appeler des éléments superDialog sur le close() méthode. Pour plus d' informations appeler la méthode de widget, voir le mode widget de (Widget) appel .

Des exemples de mesure personnalisés

Jusqu'à présent, nous avons vu des exemples des méthodes d'extension widget de prototypes. Sur le prototype méthode surchargée affecte toutes les instances du widget.

Pour illustrer ce point, considérons les exemples suivants. dialogue (dialogue) , les deux forces utilisent le même open() méthode.

$.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();

Parfois, vous avez juste besoin de changer le comportement d'une instance du widget. Pour ce faire, vous devez utiliser une normale affectation d'attribut JavaScript, obtenir une référence à des instances et remplacer cette méthode. A titre d'exemples spécifiques présentés ci-dessous.

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

personnalisation technique Surchargé est le parfait exemple d'une personnalisation unique.