Longue liste de contrôle modèle d'interface utilisateur pour le Web

Question

J'ai une page d'entrée de données où l'utilisateur est requis, donc faites quelques sélections dans une liste. Actuellement, il ne s'agit que d'une liste de vérification avec environ 10 éléments qu'ils peuvent cocher, mais qui s'étendra bientôt à environ 230. Qu'est-ce qu'un bon paradigme de l'interface utilisateur pour gérer un grand nombre d'éléments sélectionnables? Je considère le contrôle de type liste double.

Answer 1

liste double, mais pour un grand nombre de éléments non groupable: (! Duh)

• doit avoir la capacité de sélectionner plusieurs éléments
• devrait avoir la capacité de sélectionner tous les éléments avec un clic
• AURAIT capacité de recherche (dans les deux listes), et sélectionnez tous les éléments correspondants

en outre, si les listes sont très grandes (1k +), vous pouvez rencontrer des problèmes avec le rendu lent. Si oui, vous pouvez également "paginer" la liste - par ex. n'affiche que les N premiers éléments, autorise la sélection parmi ceux-ci, puis permet de déplacer le "cadre" vers les N éléments suivants. (Tout ce qui précède, BTW, sont de vrais attributs d'une solution que nous avons implémentée dans une application web d'entreprise nécessitant une liste de sélection avec 30k valeurs possibles qui n'ont pas pu être groupées).

Answer 2

Les articles sont-ils groupés de quelque façon que ce soit? Si c'est le cas, une navigation arborescente pliable pourrait être utile.

Answer 3

Cela dépend vraiment de la situation et de l'espace dont vous disposez, mais dans la plupart des cas, je préfère le contrôle de liste double, aka constructeur de liste, vous y pensant.

est ici un lien agréable pour l'inspiration (nécessite silverlight): http://good.ly/qh7aeg8

Answer 4

est ici un moyen accessible en utilisant uniquement HTML et Javascript:

1. Utilisez la balise HTML fieldset à bloc les en groupes logiques;
2. utiliser (disons) JQuery pour afficher/masquer chaque groupe;
3. ajouter la navigation en haut pour accéder à chaque groupe.

Si vous masquez initialement tous les groupes, les utilisateurs peuvent cliquer sur le lien correspondant aux groupes qu'ils souhaitent compléter. De plus, si vous ajoutez un survol (il pourrait s'agir simplement d'un attribut title sur les liens pour l'accessibilité) avec une description de chaque groupe, les utilisateurs auront un aperçu avant de le visiter.

Enfin, si les étiquettes sont assez courtes, donnez une largeur de fieldsets et faites-les en colonnes en utilisant le positionnement CSS float ou absolute. Essayez de vous en tenir à (X) HTML valide, CSS et Javascript - il y a beaucoup de précédents pour cela.

Answer 5

Vérifiez ceci: http://quince.infragistics.com/Patterns/Multiple%20Selection%20from%20a%20Large%20List.aspx