This article reprinted to: http://www.jqueryajax.com/jquery652 Today we will introduce a jquery paging plug-in. What is quickpaginate? This jquery plug-in implements the display of the content to be displayed by page, but it is not a real page, because quickpaginate does not need to interact with the server, all the content has been delivered to the client. Each time part of the information is displayed, It is browsed by page, as shown below:
Instructions for use
I. The jquery library file and quickpaginate library file are required.
2. You can customize the CSS Display Effect on pages, such as qp_prev and qp_next. Use instance
1. Contains the file section
- <SCRIPT src = "jquery. js" type = "text/JavaScript"> </SCRIPT>
- <SCRIPT src = "jquery. quickpaginate. js" type = "text/JavaScript"> </SCRIPT>
Ii. html Section
(1) Implementation of The jquery plug-in quickpaginateTextPaging Function
- <Ul id ="Biuuu_city_list">
- <Li> Beijing </LI>
- <Li> Shanghai </LI>
- <Li> Guangzhou </LI>
- <Li> Hangzhou </LI>
- <Li> Changsha </LI>
- <Li> Hefei </LI>
- <Li> Ningxia </LI>
- <Li> Chengdu </LI>
- <Li> Xi'an </LI>
- <Li> Nanchang </LI>
- </Ul>
- <Div id ="Biuuu_city"> </Div>
Specifically, the DIV with the ID of biuuu_city_list is the content to be paginated, And the ID of biuuu_city is the display page content. For details, see (2) Implementation of the jquery plug-in quickpaginateImagePaging Function
- <Div id ="Images">
- </Div>
- <Div id ="Images_counter"> </Div>
Iii. Javascript part (call the jquery plug-in quickpaginate)
- <SCRIPT type = "text/JavaScript">
- $ (Function (){
- $ ("#Biuuu_city_list Li").Quickpaginate({Perpage: 4,Pager: $ ("#Biuuu_city")});
- });
- $ (Function (){
- $ ("# Images img").Quickpaginate({Perpage: 1,Showcounter: False,Pager: $ ("# Images_counter")});
- });
- </SCRIPT>
Quick paginate parameters of jquery plug-in
Perpage indicates the number of entries displayed on each page. The default value is 6. For example, four cities are displayed on each page. For example, one image is displayed on each page.
Pager indicates the object displayed by page html code generated by quickpaginate. The default value is null. For example: $ ("# biuuu_city") and $ ("# images_counter ")
Showcounter indicates whether statistics are displayed. The default value is true.
Prev indicates the CSS style name of the previous page. The default value is qp_next. For details, see the code diagram generated by quickpaginate.
Next indicates the CSS style name of the next page. The default value is qp_prev.
Pagenumber indicates the CSS style name of the current page. The default value is qp_pagenumber.
Totalnumber indicates the CSS style name of the total number of pages. The default value is qp_totalnumber.
Counter indicates the CSS style name for statistics. The default value is qp_counter.
Notes
Note that the default quickpaginate is utf8 encoding, and you also need to modify some of the JS library code of quickpaginate. For example, if you change Prev to a Chinese previous page and next to a Chinese next page, it is actually a paging style, most of the above parameters define a certain part of the style, because the style is also very important. The above example shows that quick paging is very simple to use the jquery plug-in quickpaginate. You only need to specify the content, the number of displays on each page, and the display style to implement the quick paging function. In practical applications, pagination of menus and images is very practical and recommended. Click to download: jquery plug-in quickpaginate quick paging Program
Click here to view the jquery plug-in quick paginate bin demonstration |
