Comment fonctionne l'interface utilisateur de jQuery

l'interface utilisateur jQuery contient de nombreux widgets qui conservent l'état, elle est donc légèrement différente du modèle d'utilisation typique du plug-in jQuery. La méthode d'installation est similaire à celle de la plupart des plug-ins jQuery. Les widgets de jQuery UI sont créés sur la base de Widget Factory, qui fournit une API commune. Ainsi, une fois que vous avez appris à en utiliser un, vous savez comment utiliser les autres widgets. Ce didacticiel présentera les fonctionnalités communes à travers des exemples de code du widget barre de progression.

Installation

Afin de suivre l'état du widget, nous introduisons d'abord le cycle de vie complet du widget. Le cycle de vie commence lorsque le widget est installé. Il suffit d'appeler le plugin sur un ou plusieurs éléments, c'est à dire que le widget est installé.

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

Cela initialisera chaque élément de l'objet jQuery, dans ce cas, l'identifiant de l'élément est "elem". Parce que nous appelons la méthode .progressbar() sans paramètres, le widget sera initialisé avec ses options par défaut. Nous pouvons transmettre un ensemble d'options lors de l'installation, qui remplacent les options par défaut.

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

Le nombre d'options passées lors de l'installation peut être déterminé en fonction de nos besoins. Toutes les options que nous ne transmettons pas voient leurs valeurs par défaut utilisées.

Les options font partie de l'état du widget, nous pouvons donc également définir des options après l'installation. Nous présenterons cette partie dans la méthode option suivante.

Méthodes

Maintenant que le widget a été initialisé, nous pouvons interroger son statut, ou effectuer des actions sur le widget. Toutes les actions après initialisation sont effectuées sous forme d'appels de méthode. Afin d'appeler une méthode sur un widget, on peut passer le nom de la méthode au plugin jQuery. Par exemple, pour appeler la méthode value sur le widget progressbar, nous devons utiliser :

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

Si la méthode accepte des paramètres, nous pouvons transmettre les paramètres après le nom de la méthode. Par exemple, pour passer le paramètre 40 à la méthode value, nous pouvons utiliser :

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

Tout comme les autres méthodes de jQuery, la plupart des méthodes de widget renvoient des objets jQuery pour les liens.

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

Méthodes publiques

Chaque widget possède son propre ensemble de méthodes basées sur les fonctionnalités fournies par le widget. Cependant, certaines méthodes sont communes à tous les widgets.

option

Comme nous l'avons mentionné précédemment, nous pouvons modifier les options après l'initialisation via la méthode option. Par exemple, nous pouvons changer la valeur de la barre de progression à 30 en appelant la méthode option.

$( "#elem" ).progressbar( "option", "value", 30 );

Notez que ceci est différent de l'instance précédente où nous avons appelé la méthode value. Dans cet exemple, nous appelons la méthode option et modifions l'option de valeur sur 30.

Nous pouvons également obtenir la valeur actuelle d'une option.

$( "#elem" ).progressbar( "option", "value" );

De plus, nous pouvons mettre à jour plusieurs options à la fois en passant un objet à la méthode option.

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

Vous remarquerez peut-être que la méthode option a les mêmes indicateurs que les getters et les setters dans le code jQuery, comme .css() et .attr(). La seule différence est que vous devez passer la chaîne « option » comme premier argument. La méthode

disable

disable désactive le widget. Dans une instance de barre de progression, cela modifie le style afin que la barre de progression apparaisse désactivée.

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

appeler la méthode disable équivaut à définir l'option disabled sur true. La méthode

enable

enable est à l'opposé de la méthode disable.

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

appeler la méthode enable équivaut à définir l'option disabled sur false.

détruire

Si vous n'avez plus besoin du widget, vous pouvez le détruire et revenir au balisage d'origine. Cela signifie la fin du cycle de vie du widget.

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

Une fois que vous détruisez un widget, vous ne pouvez appeler aucune méthode sur ce widget à moins que vous n'initialisiez à nouveau le widget. Si vous souhaitez supprimer un élément, vous pouvez le faire directement via .remove() ou vous pouvez modifier l'ancêtre via .html() ou .empty() et le widget sera détruit automatiquement.

widget

Certains widgets génèrent des éléments wrapper, ou des éléments qui sont déconnectés de l'élément d'origine. Dans l'exemple ci-dessous, widget renverra l'élément généré. Dans les instances de barre de progression, il n'y a pas de wrapper généré et la méthode widget renvoie l'élément d'origine.

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

Événements

Tous les widgets ont des événements liés à leurs différents comportements pour vous avertir lorsque leur statut change. Pour la plupart des widgets, lorsque l'événement est déclenché, le nom est préfixé par le nom du widget. Par exemple, nous pouvons lier l'événement change de la barre de progression () pour le déclencher chaque fois que la valeur change.

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

Chaque événement a un rappel correspondant, qui est présenté en option. Nous pouvons utiliser le rappel change de la barre de progression, ce qui équivaut à lier l'événement progressbarchange.

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

Événements publics

La plupart des événements sont spécifiques aux widgets, et tous les widgets ont un événement create public. Cet événement est déclenché lorsque le widget est créé.