An HTML List Builder: A Study in Applying jQuery
Submitted by David Sills on Tue, 2008/12/30 - 8:06am
Tags:
Ads by DZone
Recently, a client requested a particular implementation for a
control in a web application. What they wanted looked like a standard
Windows widget, called by Microsoft a list builder.
You've undoubtedly seen a list builder: two lists next to one another,
the left one initially filled with options, the right one initially
empty, with buttons to move selected items from one list to the other.
I recognized the idiom and got to work, thinking I'd find a solution
without too much difficulty. Of course, I wasn't about to reinvent the
wheel, so the first thing I did was to check through toolkits I was
already using.
Nowadays I simply don't write JavaScript without
jQuery, so I checked out the jQuery UI project, which I knew had some
building blocks for making UI widgets. No such luck. There were bits I
could have used if I hadn't been dealing with a client who was only
interested in solutions that were useful to those needing assistive
technologies. No mouse-driven drag-and-drop solutions, then. Besides,
such solutions would have violated the principle of least surprise:
that's not how Windows list builders work.
In fact, as I looked around, I was bemused to discover that no matter
how widely I spread my seach net, I couldn't seem to catch a really
good overall solution for this problem. There were a few good,
incomplete suggestions, without a doubt, but it was increasingly clear
I would have to roll my own.
Requirements
Naturally, the first thing to put together about any solution is a set of requirements. The obvious ones were these:
- The solution had to contain two lists
- Items had to be able to be moved using buttons from each list to the other
- The user should be able to use the solution with the keyboard only
- The solution had to be useful within an HTML form
Requirement 4 meant that the solution had to return a state representation that could be interpreted on a server.
After some consideration, I added the following:
- The selects should have the same height and width regardless of their current contents
- The buttons should be vertically centered on the selects and horizontally centered on each other
- There should be buttons to move all of the contents of each list to the other
- There should be buttons to move any combination of items within each list up or down (in other words, to reorder the lists)
Article Type:
How-to
Article Resources:
(1 vote)
- Login or register to post comments
- 11985 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
