My favorites | Sign in
Logo
                
Search
for
Updated Jul 12, 2009 by mikedotmore
Labels: Featured, Phase-Implementation
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

 /* 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;
 }
 




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>


Sign in to add a comment
Hosted by Google Code