Paging Listbox; Another jQuery Plugin

Few months ago I posted a Javascript class on how to Implement a paging listbox using jQuery. which has drawn a lot of traffic and few questions lately so I thought it would be more convenient to rewrite the code as jQuery plugin and make few enhancements plus providing a complete sample code in VB.Net and C#.

Enhancements:

1. Easier usage, You only need to insert a div with the class "paging-listbox" and settings inside "options" attribute to automatically have the paging listbox loaded inside that div. still you can load the listbox with regular Javascript call.
2. Added support for right-to-left layout.
3. You can pass additional parameters to source page via AJAX. for example a category ID that user selects from another form field and should be used to query records by on the source page.
4. Few visual enhancements.

Implementation Steps

1. First, download minified JavaScript of latest version from project page.
2. Upload plugin Javascript file to your site. replace the link "jquery.paginglistbox-1.0.js" with the full URL you got.
   *No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
3. Include the following CSS Code somewhere in your page usually inside Head element.
4. Insert Code as described in the following Typical usage

CSS Code
<style type="text/css">
   /* container layer of listbox */
   .pl-layer{
      border:gray 1px solid;
      margin:0;
   }
   /* arrow button */
   .pl-button{
      border:gray 1px solid;
      background-color:#333333;
      color:white;
      padding:.5px;
      font:100% arial;
      margin:0;
      width:18px;
   }
   /* keyword input */
   .pl-key{
      margin:0;
      font:100% arial;
      border:gray 1px solid;
   }
</style>

Typical Usage
You will only need to include the 2 JavaScript's (jQuery and plugin) once; even if you have more than one listbox. 
You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your web page. 
Options must be separated by a comma, but a trailing comma is fatal.
<!--Include once in your page-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script>

<!-- Listbox auto. created by setting class="paging-listbox" and options="{options list}" -->
<div class="paging-listbox" options="{
   source:'listbox.aspx'
   ,id:'Field2'
   ,value:'product'
}">
loading..
</div>
for more usage examples download sample code..!

Custom Usage
Load plugin content by Javascript call..
<!--Include once in your page-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script>

<script type="text/javascript">
// on document ready
$(document).ready(function(){
   // Creating listbox by javascript call
   $('#listbox').pagingListbox({
      source:'listbox.aspx'
      ,id:'Field1'
      ,value:'product'
   });
});
</script> 

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

Plugin files

1. jquery.paginglistbox-1.0.min.js
2. paging-listbox-v1-sample.zip

Plugin Documentation

1. Implementation Steps
2. Options List

Tags: AJAX , hot , javascript , jQuery , jQuery Plugin , Paging , VB.Net