What's this UI pattern called?

Question

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.

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.

---

In case you were wondering, the screenshot is a World of Warcraft gear optimization program. Go figure why it was the first program that came to mind when I was trying to think of an example.

Answer 1

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.

As for the name of th pattern ... I don't really have an idea.

Answer 2

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".

I've used this jQuery plugin in the past: http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

Demo: http://www.meadmiracle.com/dlb/DLBPlugin.aspx

I had to hack it up to make it work with several instances on the same page, but if you're only going to need to have one of these "dual box" instances at once, then you should be good to go.

Answer 3

I heard a vendor refer to them as splash buckets.

Answer 4

I would think of them as connected sortables in a web context: http://jqueryui.com/demos/sortable/#connect-lists

Answer 5

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.

BTW: I have normally heard them referred to as Dual Lists as well.

Two Grids

Two Trees

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

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

Answer 7

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.

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).

And another mention in some student projects from 1998.

Answer 8

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.

Answer 9

My colleagues and I have always referred to this as the "two-box select". Seems to roll off the tongue nicely.