jQuery is good enough to built outstanding web applications without any effort. jQuery is a JavaScript library whose size is only 19KB. In this article by K.Vivekanand, you will learn how to make use of some jQuery plug-ins while building a web application. Specifically, you will learn how to make a simple item selector. You can make use of this application while building a Shopping Cart, or if you want to select a unique item from different items present in your forms.

(For more resources on jQuery, see here.)

Adding jQuery to your page

You can download the latest version of jQuery from jQuery site (http://jquery.com/) and can be added as a reference to your web pages accordingly. You can reference a local copy of jQuery using <script> tag in the page. Either you can reference your local copy or you can directly reference remote copy from jQuery.com or Google Ajax API (http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js)

Prerequisite Knowledge

In order to understand the code, one should have the basic knowledge of HTML, CSS, JavaScript and basic knowledge of jQuery.

Ingredients Used

• HTML
• CSS
• jQuery
• Photoshop (Used for Designing of Image Buttons and Backgrounds)

Preview / Download

If you would like to see the working example, please do click here http://www.developersnippets.com/snippets/jquery/item_selector/item_selector.html). And if you would like to download the snippet, click here (http://www.developersnippets.com/snippets/jquery/item_selector/item_selector.zip)

Figure 1: Snapshot of "Simple Item Selector using jQuery"

Figure 2: Overview of div containers and image buttons used

Successfully tested

The above application has been successfully tested on various browsers like IE 6.0, IE 7, IE 8, Mozilla Firefox (Latest Version), Google Chrome and Safari Browser (4.0.2) respectively.

HTML Code

Below is the HTML code with comments for you to understand it better.

<!-- Container -->
<div id="container">
 <!-- From Container -->
 <div class="from_container">
 <select id="fromSelectBox" multiple="multiple">
 <option value="1">Adobe</option>
 <option value="2">Oracle</option>
 <option value="3">Google</option>
 <option value="4">Microsoft</option>
 <option value="5">Google Talk</option>
 <option value="6">Google Wave</option>
 <option value="7">Microsoft Silver Light</option>
 <option value="8">Adobe Flex Professional</option>
 <option value="9">Oracle DataBase</option>
 <option value="10">Microsoft Bing</option>
 </select><br />
 <input type="image" src="images/selectall.jpg" class="selectall" 
 onclick="selectAll('fromSelectBox')" /><input type="image" 
 src="images/deselectall.jpg" class="deselectall" onclick="clearAll('fromSelectBox')" />
 </div>
 <!-- From Container [Close] -->
 <!-- Buttons Container -->
 <div class="buttons_container">
 <input type="image" src="images/topmost.jpg" id="topmost" /><br />
 <input type="image" src="images/moveup.jpg" id="moveup" /><br />
 <input type="image" src="images/moveright.jpg" id="moveright" /><br />
 <input type="image" src="images/moveleft.jpg" id="moveleft" /><br />
 <input type="image" src="images/movedown.jpg" id="movedown" /><br />
 <input type="image" src="images/bottommost.jpg" id="bottommost" /><br />
 </div>
 <!-- Buttons Container [Close] -->
 <!-- To Container -->
 <div class="to_container">
 <select id="toSelectBox" multiple="multiple"></select><br />
 <input type="image" src="images/selectall.jpg" class="selectall" 
 onclick="selectAll('toSelectBox')" /><input type="image" 
 src="images/deselectall.jpg" class="deselectall" onclick="clearAll('toSelectBox')" />
 </div>
 <!-- To Container [Close] -->
 <!-- To Container -->
 <div class="ascdes_container">
 <input type="image" src="images/ascending.jpg" id="ascendingorder" 
 style="margin:1px 0px 2px 0px;" onclick="ascOrderFunction()" /><br />
 <input type="image" src="images/descending.jpg" id="descendingorder" 
 onclick="desOrderFunction()" />
 </div>
 <!-- To Container [Close] -->
 <div style="clear:both"></div>
</div>
<!-- Container [Close] -->