|
Steps - First, download minified JavaScript of latest version from
project page.
- 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!
- Include the following CSS Code somewhere in your page usually inside Head
element.
- 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>
|