JqueryUI - Usine de widgets

Auparavant, la seule façon d'écrire des contrôles personnalisés dans jQuery était d'étendre l' espace de noms $ .fn . Cela fonctionne bien pour les widgets simples. Supposons que vous construisiez plus de widgets avec état, cela devient rapidement encombrant. Pour faciliter le processus de création de widgets, Widget Factory a été introduit dans l'interface utilisateur jQuery, qui supprime la plupart des passe-partout généralement associés à la gestion d'un widget.

L'usine de widgets jQueryUI est simplement une fonction ($ .widget) qui prend un nom de chaîne et un objet comme arguments et crée un plugin jQuery et une «classe» pour encapsuler ses fonctionnalités.

Syntaxe

Voici la syntaxe de la méthode jQueryUI Widget Factory -

jQuery.widget( name [, base ], prototype )

name- C'est une chaîne contenant un espace de noms et le nom du widget (séparés par un point) du widget à créer.

base- Le widget de base dont hériter. Il doit s'agir d'un constructeur qui peut être instancié avec le mot clé `new`. La valeur par défaut est jQuery.Widget .

prototype- L'objet à utiliser comme prototype pour le widget dont hériter. Par exemple, jQuery UI a un plugin "souris" sur lequel le reste des plugins d'interaction sont basés. Pour ce faire, draggable, droppable, etc. héritent tous du plugin de la souris comme ceci: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Si vous ne fournissez pas cet argument, le widget héritera directement du "widget de base", jQuery.Widget (notez la différence entre les minuscules "w" jQuery.widget et les majuscules "W" jQuery.Widget).

Widget de base

Le widget de base est le widget utilisé par la fabrique de widgets.

Options

Le tableau suivant répertorie les différentes options qui peuvent être utilisées avec le widget de base -

Sr.No. Option et description
1 désactivé

Cette option désactive le widget s'il est défini sur true . Par défaut, sa valeur estfalse.

Option - disabledhide

Cette option désactive le widget s'il est défini sur true . Par défaut, sa valeur estfalse.

Example

$( ".selector" ).widget({ disabled: true });
2 cacher

Cette option détermine comment animer le masquage de l'élément. Par défaut, sa valeur estnull.

Option - hide

Cette option détermine comment animer le masquage de l'élément. Par défaut, sa valeur estnull.

Cela peut être de type -

  • Boolean- Si défini sur false, aucune animation ne sera utilisée. L'élément disparaîtra avec la durée par défaut et l'accélération par défaut s'il est défini sur true .

  • Number - L'élément disparaîtra avec la durée spécifiée et l'accélération par défaut.

  • String - L'élément sera masqué en utilisant l'effet spécifié.

  • Object- Si la valeur est un objet, les propriétés d' effet, de retard, de durée et d' accélération peuvent être fournies.

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
3 spectacle

Cette option détermine comment animer l'affichage de l'élément. Par défaut, sa valeur estnull.

Option - show

Cette option détermine comment animer l'affichage de l'élément. Par défaut, sa valeur estnull.

Cela peut être de type -

  • Boolean- S'il est défini sur false, aucune animation ne sera utilisée pour afficher l'élément. L'élément disparaîtra avec la durée par défaut et l'accélération par défaut s'il est défini sur true .

  • Number - L'élément se fondra avec la durée spécifiée et l'accélération par défaut.

  • String - L'élément sera affiché en utilisant l'effet spécifié.

  • Object- Si la valeur est un objet, les propriétés d' effet, de retard, de durée et d' accélération peuvent être fournies.

Example

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

Méthodes

Le tableau suivant répertorie les différentes méthodes qui peuvent être utilisées avec le widget de base -

Sr.No. Action et description
1 _créer()

Cette méthode est le constructeur du widget. Il n'y a pas de paramètres, mais this.element et this.options sont déjà définis.

Action - _create()

Cette action détruit complètement la fonctionnalité d'accordéon d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode est le constructeur du widget. Il n'y a pas de paramètres, mais this.element et this.options sont déjà définis.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}
2 _delay (fn [, délai])

Cette méthode appelle la fonction fournie après un délai spécifié. Renvoie l'ID de délai à utiliser avec clearTimeout () .

Action - _delay( fn [, delay ] )

Cette méthode appelle la fonction fournie après un délai spécifié. Renvoie l'ID de délai à utiliser avec clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _détruire()

La méthode publique destroy () nettoie toutes les données courantes, tous les événements, etc., puis les délègue à cette méthode _destroy () pour un nettoyage personnalisé, spécifique au widget.

Action - _destroy()

La méthode publique destroy () nettoie toutes les données courantes, tous les événements, etc., puis les délègue à cette méthode _destroy () pour un nettoyage personnalisé, spécifique au widget.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (élément)

Cette méthode configure l'élément pour appliquer la classe ui-state-focus au focus. Les gestionnaires d'événements sont automatiquement nettoyés lors de la destruction.

Action - _focusable( element )

Cette méthode configure l'élément pour appliquer la classe ui-state-focus au focus. Les gestionnaires d'événements sont automatiquement nettoyés lors de la destruction.

Example

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
5 _getCreateEventData ()

Tous les widgets déclenchent l' événement de création . Par défaut, aucune donnée n'est fournie dans l'événement, mais cette méthode peut renvoyer un objet qui sera passé en tant que données de l'événement de création.

Action - _getCreateEventData()

Tous les widgets déclenchent l' événement de création . Par défaut, aucune donnée n'est fournie dans l'événement, mais cette méthode peut renvoyer un objet qui sera passé en tant que données de l'événement de création.

Example

_getCreateEventData: function() {
   return this.options;
}
6 _getCreateOptions ()

Cette méthode permet au widget de définir une méthode personnalisée pour définir les options lors de l'instanciation. Les options fournies par l'utilisateur remplacent les options renvoyées par cette méthode, qui remplacent les options par défaut.

Action - _getCreateOptions()

Cette méthode permet au widget de définir une méthode personnalisée pour définir les options lors de l'instanciation. Les options fournies par l'utilisateur remplacent les options renvoyées par cette méthode, qui remplacent les options par défaut.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
sept _hide (élément, option [, rappel])

Cette méthode masque immédiatement un élément, à l'aide de méthodes d'animation intégrées ou à l'aide d'effets personnalisés. Voir l'option masquer pour les valeurs d'option possibles.

Action - _hide( element, option [, callback ] )

Cette méthode masque immédiatement un élément, à l'aide de méthodes d'animation intégrées ou à l'aide d'effets personnalisés. Voir l'option masquer pour les valeurs d'option possibles.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
8 _hoverable (élément)

Cette méthode Configure un élément pour appliquer la classe ui-state-hover au survol. Les gestionnaires d'événements sont automatiquement nettoyés lors de la destruction.

Action - _hoverable( element )

Cette méthode Configure un élément pour appliquer la classe ui-state-hover au survol. Les gestionnaires d'événements sont automatiquement nettoyés lors de la destruction.

Example

this._hoverable( this.element.find( "div" ) );
9 _init ()

Chaque fois que le plugin est appelé sans arguments ou avec seulement un hachage d'option, le widget est initialisé; cela inclut la création du widget.

Action - _init()

Chaque fois que le plugin est appelé sans arguments ou avec seulement un hachage d'option, le widget est initialisé; cela inclut la création du widget.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
dix _off (élément, nom de l'événement)

Cette méthode dissocie les gestionnaires d'événements des éléments spécifiés.

Action - _off( element, eventName )

Cette méthode dissocie les gestionnaires d'événements des éléments spécifiés.

Example

this._off( this.element, "click" );
11 _on ([suppressDisabledCheck] [, élément], gestionnaires)

Lie les gestionnaires d'événements aux éléments spécifiés. La délégation est prise en charge via des sélecteurs à l'intérieur des noms d'événements, par exemple "click .foo".

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Lie les gestionnaires d'événements aux éléments spécifiés. La délégation est prise en charge via des sélecteurs à l'intérieur des noms d'événements, par exemple "click .foo".

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (clé, valeur)

Cette méthode est appelée à partir de la méthode _setOptions () pour chaque option individuelle. L'état du widget doit être mis à jour en fonction des modifications.

Action - _setOption( key, value )

Cette méthode est appelée à partir de la méthode _setOptions () pour chaque option individuelle. L'état du widget doit être mis à jour en fonction des modifications.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
13 _setOptions (options)

Cette méthode est appelée chaque fois que la méthode option () est appelée, quelle que soit la forme sous laquelle la méthode option () a été appelée.

Action - _setOptions( options )

Cette méthode est appelée chaque fois que la méthode option () est appelée, quelle que soit la forme sous laquelle la méthode option () a été appelée.

Example

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}
14 _show (élément, option [, rappel])

Affiche un élément immédiatement, à l'aide de méthodes d'animation intégrées ou à l'aide d'effets personnalisés. Voir l'option show pour les valeurs d'option possibles.

Action - _show( element, option [, callback ] )

Affiche un élément immédiatement, à l'aide de méthodes d'animation intégrées ou à l'aide d'effets personnalisés. Voir l'option show pour les valeurs d'option possibles.

Example

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}
15 _super ([arg] [, ...])

Cette méthode appelle la méthode du même nom à partir du widget parent, avec tous les arguments spécifiés. Essentiellement .call ().

Action - _super( [arg ] [, ... ] )

Cette méthode appelle la méthode du même nom à partir du widget parent, avec tous les arguments spécifiés. Essentiellement .call ().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
16 _superApply (arguments)

Appelle la méthode du même nom depuis le widget parent, avec le tableau d'arguments.

Action - _superApply( arguments )

Appelle la méthode du même nom depuis le widget parent, avec le tableau d'arguments.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (type [, événement] [, données])

Cette méthode déclenche un événement et son rappel associé. L'option avec le nom égal au type est appelée comme rappel.

Action - _trigger( type [, event ] [, data ] )

Cette méthode déclenche un événement et son rappel associé. L'option avec le nom égal au type est appelée comme rappel.

Example

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});
18 détruire()

Cette méthode supprime complètement la fonctionnalité du widget. Cela ramènera l'élément à son état pré-init.

Action - destroy()

Cette méthode supprime complètement la fonctionnalité du widget. Cela ramènera l'élément à son état pré-init.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 désactiver ()

Cette méthode désactive le widget.

Action - disable()

Cette méthode désactive le widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 activer()

Cette méthode active le widget.

Action - enable()

Cette méthode active le widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
21 option (optionName)

Cette méthode obtient la valeur actuellement associée au nom d' option spécifié .

Action - option( optionName )

Cette méthode obtient la valeur actuellement associée au nom d' option spécifié .

Example

this.option( "width" );
22 option()

Cette méthode obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options du widget.

Action - option()

Cette méthode obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options du widget.

Example

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
23 option (optionName, valeur)

Cette méthode définit la valeur de l'option de widget associée au nom d'option spécifié.

Action - option( optionName, value )

Cette méthode définit la valeur de l'option de widget associée au nom d'option spécifié.

Example

this.option( "width", 500 );
24 option (options)

Cette méthode définit une ou plusieurs options pour le widget.

Action - option( options )

Cette méthode définit une ou plusieurs options pour le widget.

Example

this.option({
   width: 500,
   height: 500
});
25 widget ()

Cette méthode renvoie un objet jQuery contenant l'élément d'origine ou un autre élément généré pertinent.

Action - widget()

Cette méthode renvoie un objet jQuery contenant l'élément d'origine ou un autre élément généré pertinent.

Example

_create: function() {
   this.widget().css( "border", "2px solid red" );
}

Événements

Sr.No. Méthode d'événement et description
1 create (événement, interface utilisateur)

Cet événement est déclenché lors de la création d'un widget.

Event - create( event, ui )

Cet événement est déclenché lors de la création d'un widget. Où event est de type Event et ui est de type Object .

Syntax

$( ".selector" ).widget({
   create: function( event, ui ) {}
});

Cycle de vie de l'usine de widgets jQueryUI

La fabrique de widgets jQueryUI fournit un moyen orienté objet de gérer le cycle de vie d'un widget. Ces activités du cycle de vie comprennent:

Créer et détruire un widget: par exemple,

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

Modification des options de widget: par exemple

$( "#elem" ).progressbar({ value: 20 });

Faire des "super" appels dans des widgets sous-classés: par exemple

$( "#elem" ).progressbar( "value" );
or 
$( "#elem" ).progressbar( "value", 40 );

Notifications d'événements: par exemple

$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});

Exemple

Créons maintenant un widget personnalisé dans l'exemple suivant. Nous allons créer un widget bouton. Nous verrons comment créer des options, des méthodes et des événements dans un widget dans les exemples suivants -

Créer un widget personnalisé

Commençons par créer un simple widget personnalisé.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML widgetfactoryexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Ajout d'options au widget personnalisé

Dans l'exemple précédent, nous avons utilisé la fonction _create pour créer un contrôle personnalisé. Mais les utilisateurs souhaitent généralement personnaliser le contrôle en définissant et en modifiant des options. Nous pouvons définir un objet d'options qui stocke les valeurs par défaut pour toutes les options que vous définissez. La fonction _setOption est utilisée à cet effet. Il est appelé pour chaque option individuelle définie par l'utilisateur. Ici, nous définissons la largeur et la couleur d' arrière-plan du bouton.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML widgetfactoryexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Ajout de méthodes au widget personnalisé

Dans l'exemple suivant, nous ajouterons des méthodes que l'utilisateur peut utiliser et qui sont très faciles à intégrer dans le framework. Nous écrirons une méthode Move, qui décale le bouton d'une distance horizontale spécifiée. Pour que cela fonctionne, nous devons également définir la position et les propriétés de gauche dans la fonction _create -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

Suite à cela, l'utilisateur peut maintenant appeler votre méthode de la manière habituelle de l'interface utilisateur jQuery -

this._button.css("position", "absolute");   
this._button.css("left", "100px");
$("button3").myButton("move", 200);
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML widgetfactoryexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Ajout d'événements à un widget personnalisé

Dans cet exemple, nous montrerons comment créer un événement. Pour créer un événement, tout ce que vous avez à faire est d'utiliser la méthode _trigger. Le premier paramètre est le nom de l'événement, le second tout objet événement standard que vous souhaitez transmettre et le troisième tout objet événement personnalisé que vous souhaitez transmettre.

Ici, nous déclenchons un événement lorsque si le bouton se déplace au-delà de x = 400. Tout ce que vous avez à faire est d'ajouter à la fonction de déplacement -

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

Dans ce cas, l'événement est appelé outbounds et un objet événement vide est passé avec un objet événement personnalisé qui fournit simplement la position comme sa seule propriété.

La fonction de déplacement entière est -

move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

L'utilisateur peut définir la fonction de gestion des événements en définissant simplement une option du même nom.

$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML widgetfactoryexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, une boîte d'alerte s'ouvre.