这个UI模式叫什么？

Question

我正在试图弄清楚这种事情是什么，最终我如何在网络浏览器中创建一个。它看起来像这样（想到第一个应用程序的屏幕截图）：

我正在寻找的特定组件/模式是两个list boxes（“包含的齿轮”和“排除的齿轮”），它们表示从一组中包含/排除项目。我并不是真的在寻找WPF名称（如果有的话），但它可能会有所帮助。

我我正在寻找这个东西的名字，如果有的话，如果你真的想要我的一天，你可以指向我的jQuery或YUI方式制作其中一个在浏览器中交易。

Answer 1

我不认为有一个“官方”名称，通常被称为“双重名单”或者......更常见的是“你有两个盒子的东西，你可以在两者之间移动”。

这是一个jQuery插件：https://github.com/Geodan/DualListBox

Answer 2

在Designing Interfaces中，UI patterns集合，Jenifer Tidwell调用 列表构建器 。在"dual list"和"list builder" academic literature中，industry和resources似乎都是公认的名称，甚至出现在this comment的SO上在帖子 Long check list ui pattern for web 。

我不知道是否有一个打包的jQuery组件，但是DZone有一篇关于使用jQuery自己滚动的文章： An HTML List Builder: A Study in Applying jQuery

我还发现different list builder pattern对同一个核心问题采取了截然不同的方法。

这些和其他类似design pattern catalogs中的模式也可以为您提供其他攻击方法的灵感。我个人总是认为“双重列表”模式有点像黑客，我们已经有了几十年的更好的选择，现在： - ）

---

更新： 我偶然发现了"swaplist"中Tklib和"Disjoint listbox"中标记为[incr Widgets]的模式{3}} Tk“mega-widget”库。因此，您会在Perl/Tk，Tkinter，Ruby/Tk和“任何（其他）精美（Tk）小部件中找到它。”

Answer 3

这真是一个美化的多选列表。由于只有2个状态“包含”（选中）“排除”（未选中）。有一个非常好的多选小部件，它将选定和未选中的项目拆分为2列，然后让您在两个之间进行拖放：

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

Answer 4

我听说供应商将其称为slushbuckets。

Answer 5

并非Microsoft UXGuide无论如何都是确定的或尽可能完整，但他们将此概念称为List Builder。

我最近一直在寻找这个UI概念的例子，以便了解何时使用箭头或标记按钮等的最佳实践。通过Google图片获得最多示例的搜索已经双列表ui 。

就问题第二部分的jQuery解决方案而言，我认为无限的答案可能是最合适的，但我只是想给你关于这个UI模式我发现的两分钱。

Answer 6

我一直以为它被称为累加器，但我很难在Google上找到任何支持它的东西。这是在obscure philosophy graduate thesis about UI usability中提及它。

  

图4-1显示了一个例子   重定向规则适用于   累加器小部件（即组件   从左侧列表中转移项目   可能的值列在右侧列表中   积累的选定项目）。

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

另一些​​提及student projects from 1998。

Answer 7

我会将它们视为网络环境中的连接排序：http://jqueryui.com/demos/sortable/#connect-lists

Answer 8

我一直称它们为“Shuttle Components”，因为你来回穿梭信息 - 似乎这是somewhat common。我想把它添加到可能性列表中。

Answer 9

这里有两个不是jQuery或YUI但是很接近的例子。这两个例子来自ExtJS;一个使用两个树和另外两个数据网格。两者都非常漂亮，可能能够帮助您完成设计理念。

顺便说一下：我通常也听说过它们被称为双重列表。

Two Grids

Two Trees

Answer 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/

实施通常可以让您进行多选并一次移动所有选定的项目。

另一种变体是启用双击以引起移动。

Answer 11

没有标准控制。通常它使用两个列表和一些按钮来实现，将一个或所有项目从一个列表移动到另一个列表，反之亦然。可以使用双击而不是移动单个项目的按钮。要移动一个或多个项目，可以使用dag和drop。

至于模式的名称......我真的不知道。

Answer 12

我不知道它是否有适当的名称，但DevX有一个页面覆盖了JavaScript implementation这样的东西。

Answer 13

我和我的同事一直称之为“两盒选择”。似乎很好地滚下了舌头。