Comment s’appelle ce modèle d’interface utilisateur?

J’essaie de comprendre comment ce genre de chose s’appelle et, éventuellement, comment en créer un dans un navigateur Web. Cela ressemble à ceci (capture d’écran de la première application qui m’est venue à l’esprit):

entrer la description de l'image ici

Le composant / modèle spécifique que je recherche est les deux zones de liste (“Gear inclus” et “Équipement exclu”) qui représentent l’inclusion / exclusion d’éléments d’un ensemble. Je ne cherche pas vraiment le nom WPF (s’il y en a un) mais cela pourrait être utile.

Je cherche le nom de ce truc, s’il y en a un, et si vous voulez vraiment faire ma journée, vous pouvez me diriger vers une manière jQuery ou YUI de faire l’une de ces transactions dans un navigateur.

Je ne pense pas qu’il y ait un nom “officiel”, généralement appelé “liste double” ou encore plus communément appelé “la chose où vous avez deux boîtes et vous pouvez déplacer des choses entre les deux”.

Voici un plugin jQuery pour cela: https://github.com/Geodan/DualListBox

Dans Designing Interfaces , une collection de modèles d’interface utilisateur , Jenifer Tidwell appelle cela un constructeur de liste . Les deux “liste double” et “constructeur de listes” semblent être des noms reconnus dans la littérature académique et dans les ressources de l’ indussortinge , apparaissant même ici dans SO dans ce commentaire sur le modèle d’interface utilisateur pour Web .

Je ne sais pas si oui ou non il y a un composant jQuery intégré, mais DZone a un article sur le déploiement de votre propre jQuery: Un créateur de listes HTML: une étude sur l’application de jQuery

J’ai également trouvé un modèle de générateur de listes différent qui adopte une approche très différente du même problème de base.

Les modèles de ceux-ci et d’autres catalogues de motifs de conception similaires peuvent également vous inspirer pour attaquer le problème. Personnellement, j’ai toujours considéré le modèle “dual list” comme un hack pour lequel nous avions de bien meilleures alternatives depuis … des décennies, maintenant 🙂


Mise à jour: Je suis tombé sur ce modèle également appelé “swaplist” dans Tklib et “Disjoint listbox” dans la bibliothèque [incrémenter] Tk “mega-widget”. Ainsi, vous le trouverez dans Perl / Tk , Tkinter , Ruby / Tk , et les widgets “Tk” sont vendus partout.

C’est vraiment une liste de sélections multiples glorifiée. Comme il n’y a que 2 états “inclus” (sélectionné) “exclu” (non sélectionné). Il y a un joli widget multi-sélection qui divise les éléments sélectionnés et non sélectionnés en 2 colonnes et vous permet de glisser-déposer entre deux:

http://www.quasipartikel.at/multiselect/

Ce n’est pas que Microsoft UXGuide soit définitif par tous les moyens ou aussi complet qu’il devrait l’être, mais ils font référence à ce concept en tant que générateur de listes .

entrer la description de l'image ici

J’ai récemment recherché des exemples de ce concept d’interface utilisateur pour avoir une idée des meilleures pratiques d’utilisation des flèches ou des boutons étiquetés, etc. La recherche qui a donné le plus d’exemples à travers les images de Google a été l’ interface utilisateur à double liste .

En termes de solution jQuery pour la deuxième partie de votre question, je pense que la réponse de l’infini est probablement la plus appropriée, mais je voulais juste vous donner mes deux cents sur ce que j’ai trouvé concernant ce modèle d’interface utilisateur.

J’ai entendu un vendeur se référer à eux comme slushbuckets .

J’ai toujours pensé que cela s’appelait un accumulateur , mais j’ai eu beaucoup de mal à trouver quoi que ce soit pour le supporter sur Google. En voici une mention dans une obscure thèse de doctorat sur la convivialité de l’interface utilisateur .

La figure 4-1 montre un exemple de règle de réorientation appliquée à un widget accumulateur (c.-à-d. Un composant transférant des éléments de la liste de gauche des valeurs possibles vers la liste droite des éléments sélectionnés accumulés).

Figure 4-1 http://www.freeimagehosting.net/uploads/630d566db7.png

Et une autre mention dans certains projets étudiants de 1998 .

Je les considérerais comme des sortingables connectés dans un contexte Web: http://jqueryui.com/demos/sortable/#connect-lists

Je les ai toujours désignés sous le nom de “composants de navette” car vous faites la navette entre les deux. Il semble que cela soit assez courant . Je pensais juste que je l’appendais à la liste des possibilités.

Voici deux exemples qui ne sont pas jQuery ou YUI mais proches. Ces deux exemples proviennent d’ExtJS; l’un utilise deux arbres et les deux autres grids de données. Les deux sont très astucieux et pourraient vous aider avec les idées de conception.

BTW: Je les ai normalement entendu parler aussi de Dual Lists.

Deux grids

Deux arbres

Il est souvent appelé “Mover” ou “List Mover”.

Voici des exemples JavaScript et JQuery.

http://javascript.internet.com/miscellaneous/move-dual-list.html

http://www.hscripts.com/scripts/JavaScript/move-list.php

http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html

http://kgaddy.com/jqueryMoverBoxes/

Les mises en œuvre vous permettent souvent de sélectionner plusieurs éléments et de déplacer tous les éléments sélectionnés en même temps.

Une autre variante consiste à activer le double-clic pour provoquer le déplacement.

Il n’y a pas de contrôle standard pour cela. Généralement, il est implémenté avec deux listes et quelques boutons pour déplacer un ou tous les éléments d’une liste à une autre et vice versa. Au lieu d’un bouton pour déplacer un seul élément, un double clic peut être utilisé. Pour déplacer un ou plusieurs éléments, vous pouvez utiliser dag et drop.

En ce qui concerne le nom du motif … Je n’ai pas vraiment d’idée.

Je ne sais pas s’il y a un nom propre pour cela, mais DevX a une page qui couvre une implémentation JavaScript simple d’une telle chose.

Mes collègues et moi-même avons toujours parlé de «sélection à deux boîtes». Semble bien rouler la langue.