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

Answer 1

It's often referred to as a "Mover," or "List Mover."

Here are JavaScript and JQuery examples.

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/

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.

Answer 2

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.

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

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

Answer 3

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 4

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

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

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.

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.

Answer 6

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.