jQuery UI fonctionne

jQuery UI contient de nombreuses petites pièces pour maintenir l'état (Widget), par conséquent, il est un plugin jQuery typique utilise un modèle légèrement différent. Son installation est similaire à l'installation de la plupart des plugin jQuery, jQuery UI widgets est basée parties bibliothèque (Widget Factory) créé bibliothèque widget de fournit une API commune. Donc, aussi longtemps que vous apprendrez à utiliser un, vous savez comment utiliser d'autres widgets (Widget). Ce tutoriel (progressbar) barre de progression des exemples de code du widget décrit les fonctionnalités communes.

installer

Afin de suivre l'état des composants, nous présentons d'abord le cycle de vie complet du widget. Lorsque le widget est installé et le cycle de vie commence. Nous avons juste besoin d'appeler le plug-in sur un ou plusieurs éléments, qui est widgets installés.

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

Cela va initialiser chaque élément dans l'objet jQuery, dans ce cas, l'élément id comme "elem". Parce que nous appelons sans argument .progressbar() méthode, le widget est l'option par défaut, conformément à son initialisation. Nous pouvons adopter une série d'options au moment de l'installation, de sorte que peut remplacer l'option par défaut.

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

Le nombre d'options lors de l'installation a passé beaucoup selon nos besoins. Nous ne transmettons toutes les options que vous utilisez leurs valeurs par défaut.

Les options font partie d'un petit Etat membre, afin que nous puissions également définir des options après l'installation. Nous suivrons la option décrit cette partie de la méthode.

manière

Depuis le widget a été initialisé, nous pouvons interroger son état, ou effectuer des actions sur le widget. Toutes les actions sont effectuées après l'initialisation sous la forme d'un appel de méthode. Pour invoquer une méthode sur le widget, nous pouvons passer le nom de la méthode du plugin jQuery. Par exemple, faire appel à la barre de progression (progressbar) widget de value méthode, nous devrions utiliser:

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

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

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

Comme d'autres méthodes jQuery, la plupart des widgets link méthode renvoie l'objet jQuery.

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

Méthode publique

Chaque widget a son propre ensemble de widgets qui fournissent approche basée sur les fonctionnalités. Cependant, il existe des moyens qui ont tous en commun sont des widgets.

option

Comme nous l' avons mentionné plus tôt, nous pouvons après l' initialisation option de changer la méthode de sélection. Par exemple, nous pouvons appeler la option de changer la méthode progressbar (barre de progression) la valeur de 30.

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

S'il vous plaît noter, ceci est avant que nous appelons value des exemples de la méthode est différente. Dans cet exemple, nous appelons l' option méthode, la possibilité de changer la valeur à 30.

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

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

En outre, nous pouvons donner l' option passer une méthode objet, mettre à jour plusieurs options.

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

Vous avez peut - être remarqué que l' option méthode présente les valeurs de code jQuery et setter même drapeau, comme .css() et .attr() . La seule différence est que vous devez passer le "option" de chaîne comme premier paramètre.

désactiver

disable façon de désactiver le widget. Dans la barre de progression (progressbar) des cas, cela va changer le style de sorte que la barre de progression est désactivé.

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

Appel disable méthode est équivalente à définir l' disabled l' option true .

permettre

enable méthode est disable l' approche opposée.

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

Appelez enable méthode est équivalente à définir l' disabled l' option false .

détruire

Si vous ne devez plus le widget, vous pouvez le détruire, revenir à la marque d'origine. Cela signifie que la fin du cycle de vie du widget.

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

Une fois que vous détruisez un widget, vous ne pouvez pas appeler une méthode sur le composant, à moins que vous ré-initialiser le widget. Si vous souhaitez supprimer l'élément directement à travers .remove() , peut aussi .html() ou .empty() pour modifier les ancêtres, le widget sera automatiquement détruit.

un widget

Certains widgets générés des enveloppes ou des éléments reliés à l'élément d'origine est déconnecté. Dans l'exemple suivant, widget rendements générés éléments. Dans l'exemple barre de progression (progressbar), ne génère pas l'emballage, widget méthode renvoie les éléments originaux.

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

événement

Événements Tous les widgets ont une variété de comportements qui leur sont associés, lorsque l'état change vous permettent de savoir. Pour la plupart des petites pièces, lorsque l'événement est déclenché, le nom du nom du widget comme un préfixe. Par exemple, nous pouvons lier l'événement barre de progression () du changement, une fois que les changements de valeur déclenchés.

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

Chaque événement a une correction correspondante, comme une option pour le rendu. Nous pouvons utiliser la barre de progression (progressbar) le change de rappel, ce qui équivaut à la liaison progressbarchange événement.

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

Les événements publics

La plupart des événements sont des widgets spécifiques, tous les widgets ont un commun create des événements. L'événement est déclenché lorsque le widget est créé.