David Sills's muse is fueled by Bach, Beethoven, and Brahms (and Berlioz and Boulez). He has no life, which comports well with the über-geekitude to which he aspires. He reads and writes fitfully in English, Spanish, French, German, Italian (mostly medieval), C, VB, Perl.... Oh, and Java and XSLT, lots and lots of Java and XSLT. Trained somewhere in darkest Central America, he works today at DataSource, Inc., on the product team for the CASE tool Abri. David has posted 9 posts at DZone. View Full User Profile

An HTML List Builder: A Study in Applying jQuery

12.30.2008
| 36890 views |
  • submit to reddit
The Elements
 
The first step was obviously to put the main elements into place, two selects (obvious choices for the lists) and buttons (including a submit button for the form the list builder would belong to):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>List Builder</title>
<link rel="stylesheet" type="text/css" href="css/list-builder.css"/>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/list-builder.js"></script>
</head>
<body>
<form method="post" action="list-builder.html">
<fieldset>
<div>
<div id="leftButtons">
<button type="button" id="leftUpButton" class="button">Up</button>
<button type="button" id="leftDownButton" class="button">Down</button>
</div>
<div id="leftList">
<select id="leftSelect" size="10" multiple="multiple">
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
<option value="fourth">Fourth</option>
<option value="fifth">Fifth</option>
<option value="sixth">Sixth</option>
<option value="seventh">Seventh</option>
<option value="eighth">Eighth</option>
<option value="ninth">Ninth</option>
<option value="tenth">Tenth</option>
<option value="eleventh">Eleventh</option>
<option value="twelfth">Twelfth</option>
<option value="thirteenth">Thirteenth</option>
<option value="fourteenth">Fourteenth</option>
<option value="fifteenth">Fifteenth</option>
</select>
</div>
<div id="middleButtons">
<div id="addRemoveButtons">
<button type="button" id="addButton" class="button">Add</button>
<button type="button" id="removeButton" class="button">Remove</button>
</div>
<div id="addAllRemoveAllButtons">
<button type="button" id="addAllButton" class="button">Add All</button>
<button type="button" id="removeAllButton" class="button">Remove All</button>
</div>
</div>
<div id="rightList">
<select id="rightSelect" size="10" multiple="multiple">
</select>
</div>
<div id="rightButtons">
<button type="button" id="rightUpButton" class="button">Up</button>
<button type="button" id="rightDownButton" class="button">Down</button>
</div>
</div>
<div style="clear: both; padding-top: 15px;">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
</body>
</html>
At this point, I had the basic parts, but it didn't look like much:
List Builder HTML onlyList Builder HTML only
The next step was to try to style these parts in a minimalist way:
@charset "utf-8";

fieldset {
border: 0;
margin: 0;
padding: 0;
}

#leftButtons, #leftList, #rightButtons, #middleButtons, #rightList {
float: left;
}

/* spacing between the add-remove group and the addAll-removeAll group */
#addAllRemoveAllButtons {
margin-top: 15px;
}

.button {
display: block;
margin-bottom: 3px;
}
This looked a little better:
List Builder HTML and CSSList Builder HTML and CSS
 
 Far from perfect, but at least requirement 1 had been met. Still, there was the question of vertical centering (not to mention the actual functionality, of course!). It occurred to me that while I could probably figure out a CSS solution that would accomplish some or even most of what I had in mind, the browser has already done most of the computation I needed: all I needed to do was to build on what it had already done.
 
This, of course, jQuery makes remarkably easy. The jQuery JavaScript library is increasingly widely accepted, in part precisely because it makes working with HTML DOM elements such a tractable problem. In particular, its formulation of the document-ready function, a function that is run after the DOM has been initialized by the browser (and so the brower's computation of initial layout has been completed) and before images have been loaded and the view has been rendered. This enables modifications to be performed that do not cause the flickering and visible redrawing that are among the hallmarks of standard onload functions.

Legacy
Article Resources: 
Published at DZone with permission of its author, David Sills.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)