这个UI模式叫什么？

Question

我试图弄清楚这种事情的调用方式,以及最终我如何在网络浏览器中创建一个.它看起来像这样(想到第一个应用程序的屏幕截图):

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

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

Answer 1

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

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

Answer 2

在设计界面中,UI模式集合,Jenifer Tidwell称之为列表生成器.这两个"双榜"和"列表生成器"似乎既要认识到它的名字学术文献和产业 资源,甚至出现在这里所以在此评论的帖子的网页长检查表的UI模式.

我不知道是否有一个打包的jQuery组件,但是DZone有一篇关于使用jQuery自己滚动的文章:HTML List Builder:应用jQuery的研究

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

这些和其他类似设计模式目录中的模式也可以为您提供其他攻击方法的灵感.我个人一直认为"双重列表"模式有点像黑客,我们已经有了几十年的更好的选择,现在:-)

更新:我只是碰到这种模式也打成跌跌撞撞 "swaplist"在 Tklib和 "脱节列表框"在 [增量小工具] Tk的"百万小部件"库.因此,你会发现它在 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解决方案,我认为infinity的答案可能是最合适的,但我只想给你关于这个UI模式我发现的两分钱.