这个 UI 模式叫什么？答案

【问题标题】：What's this UI pattern called?这个 UI 模式叫什么？
【发布时间】：2011-02-20 15:11:22
【问题描述】：

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

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

我 am 正在寻找这个东西的名字，如果有的话，如果你真的想让我开心，你可以指点我用 jQuery 或 YUI 方法来制作其中之一在浏览器中处理。

【问题讨论】：

我对这个结构很熟悉，但我也不知道它的名字。不过，我只是想知道 - 如果您使用的是 jQuery，那么与一对连接的可排序对象相比，它有什么优势？ jqueryui.com/demos/sortable/connect-lists.html
@Stobor：能够在列表之间双击项目，（本示例中未显示，但在其他示例中显示）能够一次选择/移动多个项目，而不是强迫用户拖放。坦率地说，d&d 的幻想在这里并不是很吸引人。
+1 提醒您 optigear ftw！
+1 表示一个有趣且可能非常有用的问题。唯一缺少的就是可搜索的标题（祝你好运）
@Merlyn：谢谢 :) 如果您有任何惊人的绝妙想法来获得更好的标题，请告诉我。这是我能做的最好的了。

标签： jquery user-interface yui terminology

【解决方案1】：

我不认为有一个“官方”名称，通常称为“双重列表”，或者......甚至更常见的是“你有两个盒子并且你可以在它们之间移动东西的东西”。

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

【讨论】：

天哪，这看起来很完美吗？比一般的 jQuery 插件稍微笨拙一点，但比自己从头开始做要好得多。
是的，开始工作有点笨拙，但之后我再也不用回去修复它了
“你有两个盒子的东西，你可以在它们之间移动东西”。腐烂！！！真的...
谢谢，无限。在检查了所有提到的不同选项后，我将试一试 meadmiracle。

【解决方案2】：

在Designing Interfaces，UI patterns 集合中，Jenifer Tidwell 将其称为列表构建器。在academic literature 和industry resources 中，"dual list" 和 "list builder" 似乎都是公认的名称，甚至出现在 SO 的 this comment 上的帖子 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 中的模式也可能会为您提供其他解决问题的方法的灵感。我个人一直认为“双重列表”模式有点像 hack，我们已经有更好的替代方案了......几十年来，现在:-)

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

更新：(2021)Material-UI React 组件库将此模式称为 "transfer list" 或 "shuttle"。不过，我没有在 Material Design 规范本身中找到对它的引用，因此这可能是组件库作者的发明。

【讨论】：

+1 用于正式模式参考，谢谢。您介意举几个“更好的选择”的例子吗？我很欣赏多选列表框也可以满足要求，但是当它们不在可见部分时，用户可能难以维护当前在长列表中选择了哪些项目的图片。
Welie.com 将此模式称为"Parts Selector" - 不幸的是，此答案中提到的“列表构建器”模式是一个非常不同的解决方案。太糟糕了 Welie.com 将这种不同的解决方案称为“列表构建器”，因为我真的很喜欢该模式的名称（所以我将使用双列表）。
@ianmayo：我认为这可能是我在想“现在肯定有更好的选择吗？”，但我可能也在考虑像 D'n 这样的直接操作'D 集合建设者等。我会从答案中编辑它，但我一直在想我最终会想到一个具体的例子，并想回来完成这个想法:-)

【解决方案3】：

这确实是一个美化的多选列表。由于只有 2 个状态“包含”（选中）“排除”（未选中）。有一个非常不错的多选小部件，可以将选定和未选定的项目分成 2 列，并允许您在这两列之间拖放：

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

【讨论】：

哇，这个例子似乎几乎无法使用，因为它没有遵循典型的从左到右的顺序。除此之外，它看起来真的很漂亮；）

【解决方案4】：

我听说有供应商称他们为slushbuckets。

【讨论】：

【解决方案5】：

并不是说Microsoft UXGuide 以任何方式都是确定的或尽可能完整，但他们将此概念称为List Builder。

我最近也在搜索这个 UI 概念的示例，以便了解何时使用箭头或带标签的按钮等的最佳实践。通过 Google 图片产生最多示例的搜索是dual list ui。

就您问题第二部分的 jQuery 解决方案而言，我认为 infinity 的答案可能是最合适的，但我只是想就我发现的有关此 UI 模式的内容给您两分钱。

【讨论】：

@Matt - np，也不要忘记堆栈交换下的 ux 站点，它可能会为此类问题提供更好的结果。 ux.stackexchange.com
大约一年前我问过这个问题； ux.se 那时还不存在！ :)
@Matt - 好点，注意他们偶尔会开始在这些站点之间迁移问题。主要只是想确保您和其他人都知道，以便帮助找到相关内容。
引用的内容已被移动，现在在这里：List Boxes。文档的整体结构不同，所以我选择不修改帖子。

【解决方案6】：

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

【讨论】：

我只知道它是“shuffle box”——没听过“shuttle”

【解决方案7】：

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

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

还有一些student projects from 1998中提到。

【讨论】：

我非常喜欢这个术语——因为它可能不是您想要移动的“列表项”，可能是缩略图或代码 sn-ps 的选择，或者...许多其他东西。

【解决方案8】：

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

【讨论】：

【解决方案9】：

这里有两个不是 jQuery 或 YUI 而是接近的例子。这两个例子来自 ExtJS；一个利用两棵树和另外两个数据网格。两者都非常漂亮，也许可以帮助您实现设计理念。

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

Two Grids

Two Trees

【讨论】：

Opps.. :) 感谢您的关注。

【解决方案10】：

它通常被称为“移动器”或“列表移动器”。

这里是 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 implementation 这样的东西。

【讨论】：

【解决方案13】：

我和我的同事一直将此称为“双框选择”。似乎很好地从舌头上滚下来。

【讨论】：

有趣，让我想起了消防员所说的“双盒警报”。我同意，尽管它确实会说话。