jQuery UI Extension de widgets avec la fabrique de widgets

La fabrique de widgets de jQuery UI facilite la création de widgets qui étendent les fonctionnalités de widgets existants. Ainsi, vous pouvez construire des widgets puissants par-dessus des widgets existants, ou apporter des ajustements subtils aux fonctionnalités de widgets existants.

Remarque :Avant d'étudier ce chapitre, vous devez comprendre ce qu'est la fabrique de widgets et comment elle fonctionne. Si vous ne connaissez pas ces notions, veuillez d'abord lire leComment utiliser la fabrique de widgetschapitre.

Création d'extensions de widgets

La création de widgets avec la fabrique de widgets se fait en passant$.widget()un nom de widget et un objet prototype. L'exemple ci-dessous crée un widget "superDialog" dans l'espace de noms "custom".

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

Pour prendre en charge l'extension,$.widget()accepte en option le constructeur du widget à utiliser comme widget parent. Lorsque vous spécifiez un widget parent, passez-le comme deuxième paramètre, après le nom du widget et avant l'objet prototype du widget.

Comme dans l’exemple ci-dessus, le code suivant crée également un widget « superDialog » dans l’espace de noms « custom ». Mais cette fois, il passe le constructeur duwidget dialog de jQuery UI($.ui.dialog), indiquant que le widget superDialog doit utiliser le widget dialog de jQuery UI comme widget parent.

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

Ici, les widgets superDialog et dialog sont essentiellement équivalents, seuls leurs noms et espaces de noms diffèrent. Pour rendre notre nouveau widget plus distinctif, nous pouvons ajouter quelques méthodes à son objet prototype.

L’objet prototype du widget est le dernier paramètre passé à$.widget(). Jusqu’à présent, notre exemple a utilisé un objet vide. Ajoutons maintenant une méthode à cet 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" );

MaintenantsuperDialoga unered()méthode, qui change la couleur de son texte en rouge. Remarquez comment la Widget Factory assigne automatiquementthisà l’objet instance du widget. Pour voir une liste de toutes les méthodes et propriétés disponibles sur l’instance, veuillez consulterla documentation de l’API Widget Factory。

Extension des méthodes existantes

Il est parfois nécessaire d’ajuster ou d’ajouter un comportement aux méthodes existantes d’un widget. Vous pouvez spécifier le nom de la méthode comme nom de la méthode à remplacer sur l’objet prototype. L’exemple suivant remplace laopen()méthodede dialog. Comme le dialog est ouvert par défaut, lorsque ce code s’exécute,"open"sera journalisé.

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

Lors de l'exécution de ce code, il y a un problème. Parce que nous avons redéfiniopen()le comportement par défaut, la boîte de dialogue ne s'affiche plus à l'écran.

Lorsque nous utilisons une méthode sur l'objet prototype, nous redéfinissons en réalité la méthode d'origine, en utilisant une nouvelle méthode dans la chaîne de prototypes.

Pour rendre les méthodes du widget parent disponibles, la Widget Factory fournit deux méthodes -_super()et_superApply()。

Utilisation_super()et_superApply()pour accéder au widget parent

_super()et_superApply()et appeler la même méthode sur le widget parent. Voir l'exemple ci-dessous. Comme l'exemple précédent, cet exemple redéfinit égalementopen()la méthode pour journaliser"open". Cependant, cette fois, l'exécution_super()appelle celle du dialogueopen(), et ouvre la boîte de dialogue.

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

_super()et_superApply()En fait, cela équivaut à l'originalFunction.prototype.call()etFunction.prototype.apply()méthode. Par conséquent,_super()accepte une liste d'arguments,_superApply()accepte un tableau comme argument. L'exemple suivant montre la différence entre les 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éfinition des widgets

jQuery UI 1 a ajouté la possibilité de redéfinir les widgets. Par conséquent, au lieu de créer un nouveau widget, il nous suffit de passer$.widget()un nom de widget existant. L'exemple suivant ajouteopen()la même journalisation à ..., mais pas en créant un nouveau.

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

Grâce à cette méthode, nous pouvons étendre une méthode de widget existante, mais nous pouvons toujours utiliser_super()pour accéder à la méthode originale - cela se fait non pas en créant un nouveau widget, mais en redéfinissant directement le widget.

Widgets et polymorphisme

Lors de l'interaction entre les extensions de widgets et leurs plugins, il convient de noter que le plugin du widget parent ne peut pas être utilisé pour appeler des méthodes sur les éléments du widget enfant. L'exemple suivant le démontre.

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

Dans l'exemple ci-dessus, le plugin du widget parent,dialog(), impossible d'appeler laclose()méthode sur l'élément superDialog. Pour en savoir plus sur l'appel des méthodes de widget, veuillez vous référer àAppels de méthodes de widget。

Personnalisation d'instances individuelles

Jusqu'à présent, tous les exemples que nous avons vus ont des méthodes étendues sur le prototype du widget. Redéfinir des méthodes sur le prototype affecte toutes les instances du widget.

Pour illustrer cela, voir l'exemple ci-dessous. Les deux instances du dialogue utilisent le mêmeopen()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 n'avez besoin de modifier le comportement que d'une seule instance d'un widget. Pour ce faire, vous devez utiliser une affectation de propriété JavaScript normale, obtenir une référence à l'instance et redéfinir la méthode. Cela est illustré dans l'exemple 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" );

La technique de redéfinition des méthodes sur une instance individuelle est parfaite pour les personnalisations ponctuelles.