JqueryUI - Spinner
Le widget Spinner ajoute une flèche haut / bas à gauche d'une zone de saisie permettant ainsi à un utilisateur d'incrémenter / décrémenter une valeur dans la zone de saisie. Il permet aux utilisateurs de saisir directement une valeur ou de modifier une valeur existante en la faisant tourner avec le clavier, la souris ou la molette de défilement. Il a également une fonction d'étape pour sauter des valeurs. En plus des fonctionnalités numériques de base, il permet également des options de formatage globalisées (par exemple, devise, séparateur de milliers, décimales, etc.) fournissant ainsi une zone de saisie masquée internationalisée pratique.
L'exemple suivant dépend de Globalize . Vous pouvez obtenir les fichiers Globalize à partir dehttps://github.com/jquery/globalize. Cliquez sur le presse lien, sélectionnez la version que vous voulez, et télécharger le .zip ou tar.gz fichier. Extrayez les fichiers et copiez les fichiers suivants dans le dossier où se trouve votre exemple.
lib / globalize.js: ce fichier contient le code Javascript pour gérer les localisations
lib / globalize.culture.js: ce fichier contient un ensemble complet de paramètres régionaux fournis avec la bibliothèque Globalize.
Ces fichiers sont également présents dans le dossier externe de votre bibliothèque jquery-ui.
jQueryUI fournit la méthode spinner () qui crée un spinner.
Syntaxe
le spinner() La méthode peut être utilisée sous deux formes -
$ (selector, context) .spinner (options), méthode
La méthode spinner (options) déclare qu'un élément HTML et son contenu doivent être traités et gérés comme un spinner. Le paramètre options est un objet qui spécifie l'apparence et le comportement des éléments spinner impliqués.
Syntaxe
$(selector, context).spinner (options);Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -
$(selector, context).spinner({option1: value1, option2: value2..... });Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -
| Sr.No. | Option et description |
|---|---|
| 1 | culture Cette option définit la culture à utiliser pour analyser et mettre en forme la valeur. Par défaut, sa valeur estnull ce qui signifie que la culture actuellement définie dans Globalize est utilisée. Option - culture Cette option définit la culture à utiliser pour analyser et mettre en forme la valeur. Par défaut, sa valeur estnullce qui signifie que la culture actuellement définie dans Globalize est utilisée. Uniquement pertinent si l' option numberFormat est définie. Nécessite l'inclusion de Globalize . Syntax |
| 2 | désactivée Cette option, si elle est définie sur true, désactive le spinner. Par défaut, sa valeur estfalse. Option - disabled Cette option, si elle est définie sur true, désactive le spinner. Par défaut, sa valeur estfalse. Syntax |
| 3 | Icônes Cette option définit les icônes à utiliser pour les boutons, correspondant à une icône fournie par jQuery UI CSS Framework . Par défaut, sa valeur est{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }. Option - icons Cette option définit les icônes à utiliser pour les boutons, correspondant à une icône fournie par jQuery UI CSS Framework . Par défaut, sa valeur est{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }. Syntax |
| 4 | incrémentale Cette option contrôle le nombre de pas effectués lorsque vous maintenez un bouton de rotation enfoncé. Par défaut, sa valeur esttrue. Option - incremental Cette option contrôle le nombre de pas effectués lorsque vous maintenez un bouton de rotation enfoncé. Par défaut, sa valeur esttrue. Cela peut être de type -
Syntax |
| 5 | max Cette option indique la valeur maximale autorisée. Par défaut, sa valeur estnull ce qui signifie qu'il n'y a pas de maximum appliqué. Option - max Cette option indique la valeur maximale autorisée. Par défaut, sa valeur estnull ce qui signifie qu'il n'y a pas de maximum appliqué. Cela peut être de type -
Syntax |
| 6 | min Cette option indique la valeur minimale autorisée. Par défaut, sa valeur estnull ce qui signifie qu'il n'y a pas de minimum imposé. Option - min Cette option indique la valeur minimale autorisée. Par défaut, sa valeur estnull ce qui signifie qu'il n'y a pas de minimum imposé. Cela peut être de type -
Syntax |
| sept | Format de nombre Cette option indique le format des nombres transmis à Globalize , si disponible. Les plus courants sont "n" pour un nombre décimal et "C" pour une valeur monétaire. Par défaut, sa valeur estnull. Option - numberFormat Cette option indique le format des nombres transmis à Globalize , si disponible. Les plus courants sont "n" pour un nombre décimal et "C" pour une valeur monétaire. Par défaut, sa valeur estnull. Syntax |
| 8 | page Cette option indique le nombre d'étapes à effectuer lors de la pagination via les méthodes pageUp / pageDown. Par défaut, sa valeur est10. Option - page Cette option indique le nombre d'étapes à effectuer lors de la pagination via les méthodes pageUp / pageDown. Par défaut, sa valeur est10. Syntax |
| 9 | étape Cette option indique la taille du pas à effectuer lors de la rotation via les boutons ou via les méthodes stepUp () / stepDown () . L' attribut step de l'élément est utilisé s'il existe et si l'option n'est pas explicitement définie. Option - step Cette option indique la taille du pas à effectuer lors de la rotation via les boutons ou via les méthodes stepUp () / stepDown () . L' attribut step de l'élément est utilisé s'il existe et si l'option n'est pas explicitement définie. Cela peut être de type -
Syntax |
La section suivante vous montrera quelques exemples fonctionnels de la fonctionnalité de widget spinner.
Fonctionnalité par défaut
L'exemple suivant montre un exemple simple de fonctionnalité de widget spinner, en ne passant aucun paramètre au spinner() méthode.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-1 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-1" ).spinner();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-1" value = "0" />
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Utilisation des options Min, Max et Step
L'exemple suivant illustre l'utilisation de trois options min, Max et l' étape dans le widget spinner de jQueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-2,#spinner-3 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-2" ).spinner({
min: -10,
max: 10
});
$('#spinner-3').spinner({
step: 100,
min: -1000000,
max: 1000000
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
Spinner Min, Max value set:
<input type = "text" id = "spinner-2" value = "0" /><br><br>
Spinner increments/decrements in step of of 100:
<input type = "text" id = "spinner-3" value = "0" />
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Dans l'exemple ci-dessus, vous pouvez voir dans le premier spinner que les valeurs max et min sont respectivement définies sur 10 et -10. Par conséquent, en croisant ces valeurs, le spinner arrêtera d'incrémenter / décrémenter. Dans la deuxième double flèche, la valeur de la double flèche augmente / décrémente par pas de 100.
Utilisation des icônes Option
L'exemple suivant montre l'utilisation de l'option icons dans le widget spinner de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-5 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-5" ).spinner({
icons: {
down: "custom-down-icon", up: "custom-up-icon"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-5" value = "0" />
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Dans l'exemple ci-dessus, vous pouvez remarquer que le spinner des images est modifié.
Utilisation des options de culture, numberFormat et page
L'exemple suivant illustre l'utilisation de trois options culture, numberFormat et page dans le widget spinner de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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 src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
<script>
$(function() {
$( "#spinner-4" ).spinner({
culture:"de-DE",
numberFormat:"C",
step:2,
page:10
});
});
</script>
</head>
<body>
<p>
<label for = "spinner-4">Amount to donate:</label>
<input id = "spinner-4" name = "spinner" value = "5">
</p>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Dans l'exemple ci-dessus, vous pouvez voir que la double flèche affiche le nombre au format monétaire car numberFormat est défini sur «C» et la culture est définie sur «de-DE». Ici, nous avons utilisé les fichiers Globalize de la bibliothèque jquery-ui.
$ (selector, context) .spinner ("action", params), méthode
La méthode du spinner ("action", params) peut effectuer une action sur les éléments du spinner, comme activer / désactiver le spinner. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" désactive le spinner). Découvrez les actions qui peuvent être passées, dans le tableau suivant.
Syntaxe
$(selector, context).spinner ("action", params);;Le tableau suivant répertorie les différentes actions pouvant être utilisées avec cette méthode -
| Sr.No. | Action et description |
|---|---|
| 1 | détruire Cette action détruit complètement la fonctionnalité de spinner d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Action - destroy Cette action détruit complètement la fonctionnalité de spinner d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Syntax |
| 2 | désactiver Cette action désactive la fonctionnalité de spinner. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive la fonctionnalité de spinner. Cette méthode n'accepte aucun argument. Syntax |
| 3 | activer Cette action active la fonctionnalité de spinner. Cette méthode n'accepte aucun argument. Action - enable Cette action active la fonctionnalité de spinner. Cette méthode n'accepte aucun argument. Syntax |
| 4 | option (optionName) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est le nom de l'option à obtenir. Action - option( optionName ) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est le nom de l'option à obtenir. Syntax |
| 5 | option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage des options de spinner actuel. Cette méthode n'accepte aucun argument. Action - option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage des options de spinner actuel. Cette méthode n'accepte aucun argument. Syntax |
| 6 | option (optionName, valeur) Cette action définit la valeur de l'option de double flèche associée au nom d'option spécifié . Action - optionName Cette action définit la valeur de l'option de double flèche associée au nom d'option spécifié . Syntax |
| sept | option (options) Cette action définit une ou plusieurs options pour la double flèche. Action - option( options ) Cette action définit une ou plusieurs options pour la double flèche. Syntax |
| 8 | pageDown ([pages]) Cette action décrémente la valeur du nombre de pages spécifié, tel que défini par l'option de page. Action - pageDown( [pages ] ) Cette action décrémente la valeur du nombre de pages spécifié, tel que défini par l'option de page. L' appel de pageDown () provoquera le déclenchement des événements de démarrage, de rotation et d' arrêt . Syntax |
| 9 | pageUp ([pages]) Cette action incrémente la valeur du nombre de pages spécifié, tel que défini par l'option de page. Action - pageUp( [pages ] ) Cette action incrémente la valeur du nombre de pages spécifié, tel que défini par l'option de page. L'appel de pageUp () provoquera le déclenchement des événements de démarrage, de rotation et d' arrêt . Syntax |
| dix | stepDown ([étapes]) Cette action décrémente la valeur du nombre d'étapes spécifié. Action - stepDown( [steps ] ) Cette action décrémente la valeur du nombre d'étapes spécifié. L' appel de stepDown () provoquera le déclenchement des événements de démarrage, de rotation et d' arrêt . Syntax |
| 11 | stepUp ([étapes]) Cette action incrémente la valeur du nombre d'étapes spécifié. Action - stepUp( [steps ] ) Cette action incrémente la valeur du nombre d'étapes spécifié. L' appel de stepUp () provoquera le déclenchement des événements de démarrage, de rotation et d' arrêt . Syntax |
| 12 | valeur Cette action obtient la valeur actuelle sous forme de nombre. La valeur est analysée en fonction des options numberFormat et de culture. Cette méthode n'accepte aucun argument. Action - value Cette action obtient la valeur actuelle sous forme de nombre. La valeur est analysée en fonction des options numberFormat et de culture. Cette méthode n'accepte aucun argument. Syntax |
| 13 | valeur (valeur) Cette action définit la valeur. si la valeur est transmise, la valeur est analysée en fonction des options numberFormat et de culture. Action - value( value ) Cette action définit la valeur. si la valeur est transmise, la valeur est analysée en fonction des options numberFormat et de culture. Syntax |
| 14 | widget Cette action renvoie l'élément de widget spinner; celui annoté avec le nom de la classe ui-spinner . Action - widget Cette action renvoie l'élément de widget spinner; celui annoté avec le nom de la classe ui-spinner . Syntax |
Les exemples suivants montrent comment utiliser les actions indiquées dans le tableau ci-dessus.
Utilisation des actions stepUp, stepDown, pageUp et pageDown
L'exemple suivant illustre l'utilisation des méthodes stepUp, stepDown, pageUp et pageDown .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-6 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-6").spinner();
$('button').button();
$('#stepUp-2').click(function () {
$("#spinner-6").spinner("stepUp");
});
$('#stepDown-2').click(function () {
$("#spinner-6").spinner("stepDown");
});
$('#pageUp-2').click(function () {
$("#spinner-6").spinner("pageUp");
});
$('#pageDown-2').click(function () {
$("#spinner-6").spinner("pageDown");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-6" />
<br/>
<button id = "stepUp-2">Increment</button>
<button id = "stepDown-2">Decrement</button>
<button id = "pageUp-2">Increment Page</button>
<button id = "pageDown-2">Decrement Page</button>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, utilisez les boutons respectifs pour incrémenter / décrémenter la flèche.
Utilisation de l'activation et de la désactivation de l'action
L'exemple suivant illustre l'utilisation de permettre et désactiver les méthodes.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-7 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-7").spinner();
$('button').button();
$('#stepUp-3').click(function () {
$("#spinner-7").spinner("enable");
});
$('#stepDown-3').click(function () {
$("#spinner-7").spinner("disable");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-7" />
<br/>
<button id = "stepUp-3">Enable</button>
<button id = "stepDown-3">Disable</button>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, utilisez les boutons Activer / Désactiver pour activer ou désactiver la double flèche.
Gestion des événements sur les éléments Spinner
En plus de la méthode spinner (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -
| Sr.No. | Méthode d'événement et description |
|---|---|
| 1 | changer (événement, ui) Cet événement est déclenché lorsque la valeur de la double flèche a changé et que l'entrée n'est plus focalisée. Event - change(event, ui) Cet événement est déclenché lorsque la valeur de la double flèche a changé et que l'entrée n'est plus focalisée. Où event est de type Event et ui est de type Object . Syntax |
| 2 | create (événement, interface utilisateur) Cet événement est déclenché lors de la création de la double flèche. Event - create(event, ui) Cet événement est déclenché lors de la création de la double flèche. Où event est de type Event et ui est de type Object . Syntax |
| 3 | spin (événement, interface utilisateur) Cet événement est déclenché pendant l'incrémentation / décrémentation. Event - spin(event, ui) Cet événement est déclenché pendant l'incrémentation / décrémentation. Où event est de type Event et ui est de type Object . et représente la nouvelle valeur à définir, sauf si l'événement est annulé.Syntax |
| 4 | start (événement, ui) Cet événement est déclenché avant un spin. Peut être annulé, empêchant la rotation de se produire. Event - start(event, ui) Cet événement est déclenché avant un spin. Peut être annulé, empêchant la rotation de se produire. Où event est de type Event et ui est de type Object . Syntax |
| 5 | stop (événement, interface utilisateur) Cet événement est déclenché après un spin. Event - stop(event, ui) Cet événement est déclenché après un spin. Où event est de type Event et ui est de type Object . Syntax |
Exemple
L'exemple suivant illustre l'utilisation de la méthode d'événement dans les widgets de spinner. Cet exemple montre l'utilisation des événements spin , change et stop .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<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>
<!-- CSS -->
<style type = "text/css">
#spinner-8 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-8" ).spinner({
spin: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
},
change: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
},
stop: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-8" value = "0" />
</div>
<span id = "result-2"></span>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML spinnerexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, modifiez la valeur de la double flèche et voyez les messages affichés ci-dessous pour les événements de rotation et d'arrêt. Maintenant, changez le focus de la double flèche et vous voyez un message s'afficher sur l'événement de changement.
Points d'extension
Le widget spinner est construit avec la fabrique de widgets et peut être étendu. Pour étendre les widgets, nous pouvons remplacer ou ajouter au comportement des méthodes existantes. La méthode suivante fournit comme point d'extension la même stabilité d'API que les méthodes de spinner. Répertorié dans le tableau ci-dessus .
| Sr.No. | Méthode et description |
|---|---|
| 1 | _buttonHtml (événement) Cette méthode retourne une chaîne qui est un HTML. Ce code HTML peut être utilisé pour les boutons d'incrémentation et de décrémentation de la flèche. Chaque bouton doit recevoir un nom de classe ui-spinner-button pour que les événements associés fonctionnent. Cette méthode n'accepte aucun argument. Extension Point - _buttonHtml(event, ui) Cette méthode retourne une chaîne qui est un HTML. Ce code HTML peut être utilisé pour les boutons d'incrémentation et de décrémentation de la flèche. Chaque bouton doit recevoir un nom de classe ui-spinner-button pour que les événements associés fonctionnent. Cette méthode n'accepte aucun argument. Code Example |
| 2 | _uiSpinnerHtml (événement) Cette méthode détermine le code HTML à utiliser pour encapsuler l'élément <input> du spinner. Cette méthode n'accepte aucun argument. Extension Point - _uiSpinnerHtml(event, ui) Cette méthode détermine le code HTML à utiliser pour encapsuler l'élément <input> du spinner. Cette méthode n'accepte aucun argument. Code Example |
La jQuery UI Widget Factory est une base extensible sur laquelle tous les widgets de jQuery UI sont construits. L'utilisation de la fabrique de widgets pour créer un plugin fournit des commodités pour la gestion de l'état, ainsi que des conventions pour les tâches courantes telles que l'exposition des méthodes de plugin et la modification des options après l'instanciation.