Le meilleur didacticiel jQuery UI fonctionne en 2024, dans ce didacticiel, vous pouvez apprendre installer,manière,événement,
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.
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.
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" );
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.
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.
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
.
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
.
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 ()
ou .empty()
pour modifier les ancêtres, le widget sera automatiquement détruit.
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é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!" ); } });
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éé.