Principe

Basé sur un système de <ul> et de <li> un champs texte est vérifier à chaque saisie. Lorsque la saisie contient un délimiteur, celle-ci est convertie en élément de la liste et le zone de texte se repositionne.

Utiliser la classe

Syntaxe déclarative

Il est très simple d'utiliser cette classe en mode déclaratif :

1

<div jsId="list" dojoType="dojox.form.SimpleManageableListInput"></div>

Syntaxe programmatique

Néanmoins, vous pouvez aussi créer l'objet de façon programmatique :

1

var x=new dojox.form.SimpleManageableListInput({},dojo.byId("placeHere"));

Paramètre du constructeur

Vous pouvez déterminer certains paramètre lors de la création de votre widget :

• delimiter : (string ou array) Sera utilisé comme séparateur entre les valeurs de la liste. La chaine de caractère ne peux contenir qu'un seul délimiteur.
• closeImagePath : (string) Vous permet de définir une image pour le bouton "fermer"
• pattern : (string) Ce pattern de vérification sera appliqué aux éléments de la liste. S'ils correspondent, ils auront la classe "match" sinon "mismatch"
• inputClass : (string) Vous permet de spécifier votre propre widget de saisie. utile si par exemple vous voulez ajouter de l'autocompletion
• inputHandler : (string ou array) Ce sont/C'est le(s) évènement(s) du widget de saisie qui vont/va être écouté afin de vérifier s'il faut créer un élément dans la liste. Il peut s'agir d'une chaine de caractère (les éléments multiples seront séparés par des virgules) ou d'un tableau de chaine.
• inputProperties : (object ou string) Si vous avez besoin de créer votre widget de saisie avec des paramètres spécifiques, vous devez les renseigner ici. Ceci peut être un objet ou une chaine de caractère contenant un JSON valide.

Récupérer le contenu de la liste

Ceci se fait simplement par un appel à attr("value") :
list.attr("value")

Ajouter des éléments à la liste

Ceci se fait simplement par un appel à la méthode add :
list.add("mon element")

Une liste sans zone de saisie

Pour créer une liste sans zone de saisie, utilisez dojox.form.SimpleManageableList au lieu de dojox.form.SimpleManageableListInput :

1

var x=new dojox.form.SimpleManageableList({},dojo.byId("placeHere"));

Exemple et téléchargement

Vous pouvez consulter l'exemple et récupérer la dernière version du source ici :
http://ben.dojotoolkit-fr.org/test_ListInput.html

Pour que cela fonctionne

N'oubliez pas le require :
dojo.require("dojox.form.SimpleManageableList")
De plus vous devez placer les fichiers :

• SimpleManageableList.js dans dojox/form/
• SimpleManageableList.css dans dojox/form/resources/
• _ListInputItem_x.gif dans dojox/form/resources/images/

Track

Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/8622