Как называется этот шаблон интерфейса?

Question

Я пытаюсь выяснить, как это называется, и, в конце концов, как его создать в веб-браузере. Это выглядит так (скриншот первого приложения, которое пришло в голову):

Конкретный компонент / шаблон, который я ищу, это два списка («Включенный механизм» и «Исключенный механизм»), которые представляют включение / исключение предметов из набора. На самом деле я не ищу имя WPF (если оно есть), но оно может быть полезным.

Я Я ищу имя этой штуки, если она есть, и если вы действительно хотите сделать мой день, вы можете указать мне на способ jQuery или YUI сделать одну из этих сделок в браузере.

Answer 1

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

Вот плагин jQuery для этого: https://github.com/Geodan/DualListBox

Answer 2

In Проектирование интерфейсов , Шаблоны пользовательского интерфейса коллекция, Дженифер Тидуэлл вызывает это построитель списка .И «двойной список» и «построитель списка» кажутся признанными именами для него как в академической литературе , так и в отрасли resources , даже появившийся здесь на SO в этот комментарий к сообщению Длинный шаблон списка проверок пользовательского интерфейса для веб .

Iя не знаю, есть ли упакованный компонент jQuery, но в DZone есть статья о том, как самостоятельно развернуть ее с помощью jQuery: Построитель списков HTML: исследование по применению jQuery

Я также нашел другой конструктор списков шаблон , который использует совершенно другой подход к той же основной проблеме.

Шаблоны в тех и других аналогичных каталог шаблонов проектирования может вдохновить вас и на другие способы решения проблемы.Я лично всегда считал шаблон «двойного списка» чем-то вроде хака, для которого у нас были намного лучшие альтернативы ... десятилетия, теперь: -)

---

Обновление: Я только что наткнулся на этот шаблон, также помеченный как "swaplist" в Tklib и "Disjoint listbox" в [incr Widgets] Т.к. библиотека "мега-виджет".Таким образом, вы найдете его в Perl / Tk , Tkinter , Ruby / Tk и "где угодно (иначе).продается ".

Answer 3

Это действительно прославленный список множественного выбора. Поскольку есть только 2 состояния «включено» (выбрано), «исключено» (не выбрано). Существует довольно красивый виджет с множественным выбором, который разделяет выбранные и невыбранные элементы на 2 столбца и позволяет перетаскивать их между двумя:

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

Answer 4

Не то, чтобы Microsoft UXGuide был окончательным, каким-либо образом или настолько полным, как должно быть, но они называют эту концепцию Построителем списка .

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

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

Answer 5

Я слышал, что продавец называет их слякоть .

Answer 6

Я всегда думал, что это называется аккумулятор , но мне было очень трудно найти что-нибудь, что поддержало бы это в Google. Вот упоминание об этом в неясной дипломной работе по философии о юзабилити пользовательского интерфейса .

На рисунке 4-1 показан пример Правило переориентации применяется к аккумуляторный виджет (то есть компонент перенос предметов из левого списка возможных значений в правом списке накопленных выбранных предметов).

Рисунок 4-1 http://www.freeimagehosting.net/uploads/630d566db7.png

И еще одно упоминание в некоторых студенческих проектах 1998 .

Answer 7

Я всегда называю их «Компоненты Shuttle», так как вы перемещаете информацию взад-вперед - кажется, что это несколько распространено . Просто подумал, что добавлю это в список возможностей.

Answer 8

Я думаю о них как о связанных сортируемых объектах в веб-контексте: http://jqueryui.com/demos/sortable/#connect-lists

Answer 9

Это часто упоминается как "Двигатель" или "Двигатель Списка".

Вот примеры JavaScript и 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/

Реализации часто позволяют вам сделать множественный выбор и переместить все выбранные элементы одновременно.

Другой вариант - включить двойной щелчок, чтобы вызвать перемещение.

Answer 10

Вот два примера, которые не являются jQuery или YUI, но близки. Эти два примера взяты из ExtJS; один использует два дерева и два других грида данных. Обе они довольно изящны и могут помочь вам с идеями дизайна.

Кстати: я обычно слышал, что их также называют двойными списками.

Две решетки

Два дерева