这个UI模式叫什么?

我试图找出这种东西被称为什么,并最终如何在网页浏览器中创build一个。 它看起来像这样(想到的第一个应用程序的屏幕截图):

在这里输入图像说明

我正在寻找的特定组件/模式是两个列表框 (“Included Gear”和“Excluded Gear”),表示包含/排除组中的项目。 我不是真的在寻找WPF的名字(如果有的话),但它可能会有所帮助。

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

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

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

在devise界面中 ,一个UI模式集合, Jenifer Tidwell称之为列表生成器 。 在学术文献和行业 资源中 , “双重名单”和“名单build造者”似乎都被公认为它的名字,甚至在这篇评论中也出现在SO上。

我不知道是否有一个打包的jQuery组件,但DZone有一篇关于使用jQuery自己编写的文章: 一个HTML列表生成器:研究应用jQuery

我还发现了一个不同的列表生成器模式 ,它采用了一个非常不同的方法来解决同一个核心问题。

这些和其他类似的devise模式目录中的模式也可能为您提供其他攻击问题的方法。 我个人总是认为“双重列表”模式有点像黑客,我们已经有了更好的select……几十年了,现在:-)


更新:我只是偶然发现这个模式也被标记为Tklib中的“交换列表”和[incr Widgets] Tk“mega-widget”库中的“Disjoint listbox” 。 因此,你会发现它在Perl / Tk , Tkinter , Ruby / Tk ,和“任何地方(其他)罚款(Tk)小部件销售”。

这真是一个荣耀的多select名单。 由于只有2个国家“包括”(选定)“排除”(未选定)。 有一个相当不错的多select小部件,将选定的和未选定的项目分割成2列,让您在两个列之间拖放:

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

我听到一个供应商把它们称为slushbuckets 。

并不是说Microsoft UXGuide是以任何方式确定的,或者应该是完整的,但它们将这个概念称为列表生成器

在这里输入图像说明

我最近一直在寻找这个UI概念的例子,以得到什么时候使用箭头或标签button等的最佳做法的想法。 通过Google图像获得最多示例的search是双列表用户界面

对于你的问题的第二部分的jQuery解决scheme,我认为无限的答案可能是最合适的,但我只是想给你我的两分钱,我已经发现有关此UI模式。

我一直认为这是一个累加器 ,但我很难find任何支持Google的东西。 这里有一个关于UI可用性的晦涩的哲学gradle论文中提到它。

图4-1显示了一个应用于累加器小部件的redirect规则(即从左侧可能值列表向右侧累积选定项目列表中传输项目的组件)的示例。

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

还有一个在1998年的一些学生项目中提到。

我想他们在Web上下文中连接sorting: http : //jqueryui.com/demos/sortable/#connect-lists

我一直把它们称为“穿梭组件”,因为你是来回穿梭信息 – 这似乎有点普遍 。 刚刚想到我会把它添加到可能性列表。

这里有两个不是jQuery或者YUI但是closures的例子。 这两个例子来自ExtJS; 一个使用两个树和另外两个数据网格。 两者都非常光滑,可能能够帮助您devise的想法。

顺便说一句:我通常听到他们也称为双列表。

两个网格

两棵树

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

这里是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/

实现通常使您能够多选并一次移动所有选定的项目。

另一个变种是启用双击来引起移动。

对此没有标准的控制。 通常用两个列表和一些button来实现,将一个或所有项目从一个列表移动到另一个列表,反之亦然。 可以使用双击来代替移动单个项目的button。 移动一个或多个物品可以使用数字和放下。

至于名字的模式…我真的没有一个主意。

我不知道是否有适当的名字,但DevX有一个页面,涵盖了这样一个直接的JavaScript实现 。

我和我的同事一直把这称为“两箱select”。 似乎很好地滚动舌头。