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
|
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 -
Example
|
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 -
Example
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
19 | désactiver () Cette méthode désactive le widget. Action - disable() Cette méthode désactive le widget. Example
|
20 | activer() Cette méthode active le widget. Action - enable() Cette méthode active le widget. Example
|
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
|
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
|
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
|
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
|
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
|
É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
|
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.