I'm trying to figure out what this sort of thing is called, and eventually how I can create one in a web browser. It looks like this (screenshot of the first app that came to mind):
我试图弄清楚这种事情的调用，最终我如何在网络浏览器中创建一个。它看起来像这样（想到第一个应用程序的屏幕截图）：
The specific component/pattern I'm looking for is the two list boxes ("Included Gear" and "Excluded Gear") that represent inclusion/exclusion of items from a set. I'm not really looking for the WPF name (if there is one) but it might be helpful.
我正在寻找的特定组件/模式是两个列表框（“Included Gear”和“Excluded Gear”），它们表示从集合中包含/排除项目。我不是真的在寻找WPF名称（如果有的话），但它可能会有所帮助。
I am looking for the name of this thingy, if there is one, and if you really want to make my day, you can point me toward a jQuery or YUI way of making one of these dealies in a browser.
我正在寻找这个东西的名称，如果有的话，如果你真的想要我的一天，你可以指向我jQuery或YUI的方式在浏览器中制作这些交易之一。
13 个解决方案
#1
39
I don't think there's an "official" name, typically called "dual list" or.. even more commonly known as "the thing where you have two boxes and you can move things in between".
我不认为有一个“官方”名称，通常被称为“双重名单”或者......更常见的是“你有两个盒子的东西，你可以在两者之间移动”。
Here's a jQuery Plugin for this: https://github.com/Geodan/DualListBox
这是一个jQuery插件：https：//github.com/Geodan/DualListBox
#2
33
In Designing Interfaces, a UI patterns collection, Jenifer Tidwell calls that a list builder. Both "dual list" and "list builder" seem to be recognized names for it in both the academic literature and industry resources, even appearing here on SO in this comment on the post Long check list ui pattern for web.
在Designing Interfaces中，UI模式集合Jenifer Tidwell称之为列表构建器。 “双重列表”和“列表构建器”在学术文献和行业资源中似乎都是公认的名称，甚至在这篇评论中也出现在SO的帖子长检查列表中。
I don't know whether or not there's a packaged jQuery component, but DZone has an article on rolling your own using jQuery: An HTML List Builder: A Study in Applying jQuery
我不知道是否有一个打包的jQuery组件，但是DZone有一篇关于使用jQuery自行编辑的文章：HTML List Builder：应用jQuery的研究
I also found a different list builder pattern which takes a very different approach to the same core problem.
我还发现了一个不同的列表构建器模式，它采用了一种非常不同的方法来解决同一个核心问
The patterns in those and other, similar design pattern catalogs may give you inspiration for other ways of attacking the problem, too. I've personally always considered the "dual list" pattern a bit of a hack for which we've had much better alternatives for... decades, now :-)
这些和其他类似设计模式目录中的模式也可以为您提供其他攻击方法的灵感。我个人一直认为“双重列表”模式有点像黑客，我们已经有了几十年的更好的选择，现在:-)
Update: I just stumbled across this pattern also labeled as a "swaplist" in Tklib and a "Disjoint listbox" in the [incr Widgets] Tk "mega-widget" library. Thus, you will find it in Perl/Tk, Tkinter, Ruby/Tk, and "anywhere (else) fine (Tk) widgets are sold."
更新：我偶然发现了这个模式，也被标记为Tklib中的“swaplist”和[incr Widgets] Tk“mega-widget”库中的“Disjoint listbox”。因此，你会发现它在Perl / Tk，Tkinter，Ruby / Tk和“任何（其他）精细（Tk）小部件被出售。”
#3
6
It's really a glorified multi select list. Since there is only 2 states "included" (selected) "excluded" (not selected). There is a pretty nice multi select widget that splits the selected and not selected items in to 2 columns and lets you drag and drop between then two:
这真是一个美化的多选列表。由于只有2个状态“包含”（选中）“排除”（未选中）。有一个非常好的多选小部件，可以将选定和未选中的项目拆分为2列，然后让您在两个之间进行拖放：
http://www.quasipartikel.at/multiselect/
http://www.quasipartikel.at/multiselect/
#4
5
Not that the Microsoft UXGuide is definitive by any means or as complete as it should be but they refer to this concept as a List Builder.
并非Microsoft UXGuide以任何方式确定或尽可能完整，但他们将此概念称为List Builder。
I've recently been searching for examples of this UI concept as well in order to get an idea of the best practice for when to use arrows or labeled buttons and such. The search that has yielded the most examples through Google images has been dual list ui.
我最近一直在寻找这个UI概念的例子，以便了解何时使用箭头或标记按钮等的最佳实践。通过Google图像获得最多示例的搜索是双列表ui。
In terms of a jQuery solution for the second part of your question I think infinity's answer is probably the most appropriate but I just wanted to give you my two cents on what I've found regarding this UI pattern.
对于问题第二部分的jQuery解决方案，我认为infinity的答案可能是最合适的，但我只想给你关于这个UI模式我发现的两分钱。
#6
3
I've always thought it was called an accumulator, but I had a very hard time finding anything to support that on Google. Here's a mention of it in an obscure philosophy graduate thesis about UI usability.
我一直以为它被称为累加器，但我很难找到任何支持谷歌的东西。这是一篇关于UI可用性的晦涩的哲学研究生论文中提到它。
Figure 4-1 shows an example of a reorientation rule applied to an accumulator widget (i.e. a component transferring items from the left list of possible values to the right list of accumulated selected items).
图4-1示出了应用于累加器窗口小部件的重定向规则的示例（即，将项目从可能值的左列表传送到累积的所选项目的右列表的组件）。
Figure 4-1 http://www.freeimagehosting.net/uploads/630d566db7.png
图4-1 http://www.freeimagehosting.net/uploads/630d566db7.png
And another mention in some student projects from 1998.
从1998年的一些学生项目中再提一次。
#7
2
I would think of them as connected sortables in a web context: http://jqueryui.com/demos/sortable/#connect-lists
我会将它们视为Web环境中的连接排序：http：//jqueryui.com/demos/sortable/#connect-lists
#8
2
I have always referred to them as "Shuttle Components" since you are shuttling info back and forth - it seems that this is somewhat common. Just figured I'd add it to the list of possibilities.
我总是将它们称为“Shuttle Components”，因为你来回穿梭信息 - 这似乎有些常见。我想我会把它添加到可能性列表中。
#9
1
Here are two examples that are not jQuery or YUI but close. These two examples are from ExtJS; one utilizes two Trees and the other two Data Grids. Both are pretty slick and might be able to help you with the design ideas.
这里有两个不是jQuery或YUI但是很接近的例子。这两个例子来自ExtJS;一个使用两个树和另外两个数据网格。两者都非常光滑，可能能够帮助您设计理念。
BTW: I have normally heard them referred to as Dual Lists as well.
顺便说一句：我通常也听说过它们被称为双重列表。
两个网格
两棵树
#10
1
It's often referred to as a "Mover," or "List Mover."
它通常被称为“Mover”或“List Mover”。
Here are JavaScript and JQuery examples.
这是JavaScript和JQuery示例。
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://www.hscripts.com/scripts/JavaScript/move-list.php
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://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html
http://kgaddy.com/jqueryMoverBoxes/
http://kgaddy.com/jqueryMoverBoxes/
Implementations often enable you to do multi-select and move all the selected items at once.
实现通常使您可以进行多选并一次移动所有选定的项目。
Another variant is to enable double-click to cause the move.
另一种变体是启用双击以引起移动。
#11
0
There is no standard control for this. Usually it is implemented with two lists and some buttons to move one or all items from one list to another and vice versa. Instead of a button to move a single item a double click could be used. To move one or more items dag and drop can be employed.
对此没有标准控制。通常它使用两个列表和一些按钮来实现，将一个或所有项目从一个列表移动到另一个列表，反之亦然。可以使用双击而不是移动单个项目的按钮。为了移动一个或多个物品，可以使用dag和drop。
As for the name of th pattern ... I don't really have an idea.
至于模式的名称......我真的不知道。
#12
0
I don't know if there's a proper name for it but DevX has a page that covers a straight JavaScript implementation of such a thing.
我不知道它是否有适当的名称，但DevX有一个页面，涵盖了这种东西的直接JavaScript实现。
#13
0
My colleagues and I have always referred to this as the "two-box select". Seems to roll off the tongue nicely.
我和我的同事一直称之为“两盒选择”。似乎很好地滚下了舌头。
#1
39
I don't think there's an "official" name, typically called "dual list" or.. even more commonly known as "the thing where you have two boxes and you can move things in between".
我不认为有一个“官方”名称，通常被称为“双重名单”或者......更常见的是“你有两个盒子的东西，你可以在两者之间移动”。
Here's a jQuery Plugin for this: https://github.com/Geodan/DualListBox
这是一个jQuery插件：https：//github.com/Geodan/DualListBox
#2
33
In Designing Interfaces, a UI patterns collection, Jenifer Tidwell calls that a list builder. Both "dual list" and "list builder" seem to be recognized names for it in both the academic literature and industry resources, even appearing here on SO in this comment on the post Long check list ui pattern for web.
在Designing Interfaces中，UI模式集合Jenifer Tidwell称之为列表构建器。 “双重列表”和“列表构建器”在学术文献和行业资源中似乎都是公认的名称，甚至在这篇评论中也出现在SO的帖子长检查列表中。
I don't know whether or not there's a packaged jQuery component, but DZone has an article on rolling your own using jQuery: An HTML List Builder: A Study in Applying jQuery
我不知道是否有一个打包的jQuery组件，但是DZone有一篇关于使用jQuery自行编辑的文章：HTML List Builder：应用jQuery的研究
I also found a different list builder pattern which takes a very different approach to the same core problem.
我还发现了一个不同的列表构建器模式，它采用了一种非常不同的方法来解决同一个核心问
The patterns in those and other, similar design pattern catalogs may give you inspiration for other ways of attacking the problem, too. I've personally always considered the "dual list" pattern a bit of a hack for which we've had much better alternatives for... decades, now :-)
这些和其他类似设计模式目录中的模式也可以为您提供其他攻击方法的灵感。我个人一直认为“双重列表”模式有点像黑客，我们已经有了几十年的更好的选择，现在:-)
Update: I just stumbled across this pattern also labeled as a "swaplist" in Tklib and a "Disjoint listbox" in the [incr Widgets] Tk "mega-widget" library. Thus, you will find it in Perl/Tk, Tkinter, Ruby/Tk, and "anywhere (else) fine (Tk) widgets are sold."
更新：我偶然发现了这个模式，也被标记为Tklib中的“swaplist”和[incr Widgets] Tk“mega-widget”库中的“Disjoint listbox”。因此，你会发现它在Perl / Tk，Tkinter，Ruby / Tk和“任何（其他）精细（Tk）小部件被出售。”
#3
6
It's really a glorified multi select list. Since there is only 2 states "included" (selected) "excluded" (not selected). There is a pretty nice multi select widget that splits the selected and not selected items in to 2 columns and lets you drag and drop between then two:
这真是一个美化的多选列表。由于只有2个状态“包含”（选中）“排除”（未选中）。有一个非常好的多选小部件，可以将选定和未选中的项目拆分为2列，然后让您在两个之间进行拖放：
http://www.quasipartikel.at/multiselect/
http://www.quasipartikel.at/multiselect/
#4
5
Not that the Microsoft UXGuide is definitive by any means or as complete as it should be but they refer to this concept as a List Builder.
并非Microsoft UXGuide以任何方式确定或尽可能完整，但他们将此概念称为List Builder。
I've recently been searching for examples of this UI concept as well in order to get an idea of the best practice for when to use arrows or labeled buttons and such. The search that has yielded the most examples through Google images has been dual list ui.
我最近一直在寻找这个UI概念的例子，以便了解何时使用箭头或标记按钮等的最佳实践。通过Google图像获得最多示例的搜索是双列表ui。
In terms of a jQuery solution for the second part of your question I think infinity's answer is probably the most appropriate but I just wanted to give you my two cents on what I've found regarding this UI pattern.
对于问题第二部分的jQuery解决方案，我认为infinity的答案可能是最合适的，但我只想给你关于这个UI模式我发现的两分钱。
#5
#6
3
I've always thought it was called an accumulator, but I had a very hard time finding anything to support that on Google. Here's a mention of it in an obscure philosophy graduate thesis about UI usability.
我一直以为它被称为累加器，但我很难找到任何支持谷歌的东西。这是一篇关于UI可用性的晦涩的哲学研究生论文中提到它。
Figure 4-1 shows an example of a reorientation rule applied to an accumulator widget (i.e. a component transferring items from the left list of possible values to the right list of accumulated selected items).
图4-1示出了应用于累加器窗口小部件的重定向规则的示例（即，将项目从可能值的左列表传送到累积的所选项目的右列表的组件）。
Figure 4-1 http://www.freeimagehosting.net/uploads/630d566db7.png
图4-1 http://www.freeimagehosting.net/uploads/630d566db7.png
And another mention in some student projects from 1998.
从1998年的一些学生项目中再提一次。
#7
2
I would think of them as connected sortables in a web context: http://jqueryui.com/demos/sortable/#connect-lists
我会将它们视为Web环境中的连接排序：http：//jqueryui.com/demos/sortable/#connect-lists
#8
2
I have always referred to them as "Shuttle Components" since you are shuttling info back and forth - it seems that this is somewhat common. Just figured I'd add it to the list of possibilities.
我总是将它们称为“Shuttle Components”，因为你来回穿梭信息 - 这似乎有些常见。我想我会把它添加到可能性列表中。
#9
1
Here are two examples that are not jQuery or YUI but close. These two examples are from ExtJS; one utilizes two Trees and the other two Data Grids. Both are pretty slick and might be able to help you with the design ideas.
这里有两个不是jQuery或YUI但是很接近的例子。这两个例子来自ExtJS;一个使用两个树和另外两个数据网格。两者都非常光滑，可能能够帮助您设计理念。
BTW: I have normally heard them referred to as Dual Lists as well.
顺便说一句：我通常也听说过它们被称为双重列表。
两个网格
两棵树
#10
1
It's often referred to as a "Mover," or "List Mover."
它通常被称为“Mover”或“List Mover”。
Here are JavaScript and JQuery examples.
这是JavaScript和JQuery示例。
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://www.hscripts.com/scripts/JavaScript/move-list.php
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://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html
http://kgaddy.com/jqueryMoverBoxes/
http://kgaddy.com/jqueryMoverBoxes/
Implementations often enable you to do multi-select and move all the selected items at once.
实现通常使您可以进行多选并一次移动所有选定的项目。
Another variant is to enable double-click to cause the move.
另一种变体是启用双击以引起移动。
#11
0
There is no standard control for this. Usually it is implemented with two lists and some buttons to move one or all items from one list to another and vice versa. Instead of a button to move a single item a double click could be used. To move one or more items dag and drop can be employed.
对此没有标准控制。通常它使用两个列表和一些按钮来实现，将一个或所有项目从一个列表移动到另一个列表，反之亦然。可以使用双击而不是移动单个项目的按钮。为了移动一个或多个物品，可以使用dag和drop。
As for the name of th pattern ... I don't really have an idea.
至于模式的名称......我真的不知道。
#12
0
I don't know if there's a proper name for it but DevX has a page that covers a straight JavaScript implementation of such a thing.
我不知道它是否有适当的名称，但DevX有一个页面，涵盖了这种东西的直接JavaScript实现。
#13
0
My colleagues and I have always referred to this as the "two-box select". Seems to roll off the tongue nicely.
我和我的同事一直称之为“两盒选择”。似乎很好地滚下了舌头。