Подтвердить что ты не робот

Что называется этим шаблоном пользовательского интерфейса?

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

enter image description here

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

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

4b9b3361

Ответ 1

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

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

Ответ 2

В Проектирование интерфейсов, шаблоны пользовательского интерфейса коллекция Jenifer Tidwell называет это конструктором списка. Оба "двойной список" и list builder кажется, были признаны для него имена как в академической литературе, так и индустрия ресурсы, даже появляющиеся здесь на SO в этом комментарии на post Длинный список проверок ui для веб-сайтов.

Я не знаю, есть ли упакованный компонент jQuery, но у DZone есть статья о том, чтобы переместить свой собственный, используя jQuery: Конструктор HTML-списка: Исследование применения jQuery

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

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


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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

enter image description here

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

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

Ответ 6

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

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

Figure 4-1

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

Ответ 8

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

Ответ 9

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

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

Две сетки

Два дерева

Ответ 10

Он часто упоминается как "Mover" или "List Mover".

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

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

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

Ответ 11

Для этого нет стандартного управления. Обычно он реализуется с двумя списками и некоторыми кнопками для перемещения одного или всех элементов из одного списка в другой и наоборот. Вместо кнопки перемещения одного элемента можно использовать двойной щелчок. Для перемещения одного или нескольких предметов можно использовать dag и drop.

Что касается имени шаблона... У меня действительно нет идеи.

Ответ 12

Я не знаю, есть ли у него собственное имя, но у DevX есть страница, которая покрывает прямую реализацию JavaScript такой вещи.

Ответ 13

Мои коллеги и я всегда называли это "выбор из двух ящиков". Кажется, приятно свернуть язык.