(For more resources on jQuery, see here.)
You can download the latest version of jQuery from jQuery site (http://jquery.com/) and can be added as 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)
In order to understand the code, one should have the basic knowledge of HTML, CSS, JavaScript and basic knowledge of jQuery.
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
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.
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"
> src="images/deselectall.jpg" class="deselectall" > </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"
> src="images/deselectall.jpg" class="deselectall" > </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;" > <input type="image" src="images/descending.jpg" id="descendingorder"
> </div>
<!-- To Container [Close] -->
<div style="clear:both"></div>
</div>
<!-- Container [Close] -->
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…