Длинный контрольный список шаблон пользовательского интерфейса для веб

Question

У меня есть страница ввода данных, где требуется пользователь, поэтому сделайте несколько выборов из списка. В настоящее время это всего лишь контрольный список с примерно 10 пунктами, которые они могут пометить, но вскоре он расширится до примерно 230. Что такое хорошая парадигма пользовательского интерфейса для работы с большим количеством выбираемых элементов? Я рассматриваю двойной тип управления списком.

Answer 1

Двойной список, НО, для большого количества не группируемых элементов:

• ДОЛЖЕН иметь возможность выбирать несколько элементов (Дух!)
• ДОЛЖЕН иметь возможность выбирать ВСЕ элементы одним кликом
• ДОЛЖЕН иметь возможность поиска (в любом списке) и выбора всех подходящих элементов

Также, если списки ДЕЙСТВИТЕЛЬНО велики (1k +), вы можете столкнуться с проблемами при медленном рендеринге. Если это так, вы также можете «разбить» на страницы список - например, отображать только первые N элементов, разрешить выбор из них, а затем возможность сдвигать «кадр» к следующим N элементам.

(кстати, все вышеперечисленное - реальные атрибуты решения, которое мы внедрили в корпоративное веб-приложение, для которого требуется список выбора с 30 тыс. Возможных значений, которые нельзя сгруппировать)

Answer 2

Это действительно зависит от ситуации и от того, сколько у вас места, но в большинстве случаев я предпочитаю элемент управления двойным списком, он же конструктор списка, о котором вы думаете.

Вот хорошая ссылка для вдохновения (требуется Silverlight): http://good.ly/qh7aeg8

Answer 3

Вот доступный способ, использующий только HTML и Javascript:

1. Используйте тег HTML fieldset, чтобы разделить их на логические группы;
2. используйте (скажем) JQuery, чтобы показать / скрыть каждую группу;
3. добавить навигацию вверху, чтобы перейти к каждой группе.

Если изначально вы скрыли все группы, пользователи могут щелкнуть ссылку для групп, которые они хотят заполнить. Кроме того, если вы добавите ролловер (может быть просто атрибутом всплывающей подсказки title в ссылках для доступности) с описанием каждой группы, у пользователей будет «предварительный просмотр» перед посещением.

Наконец, если метки достаточно короткие, задайте ширину fieldsets и сделайте их столбцами, используя позиционирование CSS float или absolute.

Попробуйте придерживаться правильных (X) HTML, CSS и Javascript - для этого есть множество прецедентов.

Answer 4

Сгруппированы ли элементы каким-либо образом? Если это так, может быть полезна складная навигация в виде дерева.