Simple paging plug-in jqPagination for touch screen edition, pagination jqpagination

Simple paging plug-in jqPagination for touch screen edition, pagination jqpagination

Loading and paging

When it comes to paging issues on HTML5 and jquery, the excellent paging plug-ins are used to catch the ghost on the Internet. However, it is also suitable for websites compatible with Ipad and mobile phones, but not a lot of pages.

Some people may say that the touch screen is now popular to pull down the bottom and load the next page content, similar to the Weibo and QQ space mode, paging is out of date. Perhaps, after reading the bottom, click "next page" and no operation is required to automatically load the content to continue reading. This small point will bring users a very different subtle feeling.

It is certain that pagination is required when the data volume to be displayed is large. One is the expectation of the user's content, and the other is a pause for the visitor. If you have read more than a dozen screens and the scroll bar stays in the middle of the browser, it is much more desperate. The most important thing is the paging jump function. If there is 600 page content, I saw 300 pages yesterday. Now I want to start with 301. Do you dare to load 300 screens in a drop-down list for me?

Plug-in information

Back to the question, jqPagination is a simple and easy-to-use jquery paging plug-in that uses HTML5 and CSS3 technologies for implementation. This plug-in provides several parameter settings options to generate a paging control through simple configuration. In addition, its appearance style is customizable and highly scalable. Its built-in paging functions include the previous page, next page, home page, last page, and directly jump to a page (an input box in the middle ).

Official Website: http://beneverard.github.com/jqPagination/

Demo: http://beneverard.github.com/jqPagination/#demo

The default style is as follows:

I always think that page jumping is a very important function, especially when the page size is huge, and some plug-ins that look pretty but do not carry page jumping are completed. For example:

When several page numbers are listed in this way, the screen of the mobile phone is limited and will appear very crowded. Second, you can refer to page 3000 to show me the sentence ??

Return to the topic and follow the steps below to use jqPagination:

1. Add the JS and CSS files of the jQuery class library and jqPagination plug-in.

<Link rel = "stylesheet" href = "jqpagination.css"/>
<Script src = "jquery-1.6.2.min.js"> </script>
<Script src = "jquery. jqpagination. min. js"> </script>

2. The following HTML is required.

<Div class = "pagination">
<A href = "#" class = "first" data-action = "first"> & laquo; </a>
<A href = "#" class = "previous" data-action = "previous"> & lsaquo; </a>
<Input type = "text" readonly = "readonly" data-max-page = "40"/>
<A href = "#" class = "next" data-action = "next"> & rsaquo; </a>
<A href = "#" class = "last" data-action = "last"> & raquo; </a>
</Div>

3. initialize the plugin.

$ ('. Pagination'). jqPagination ({
Link_string :'/? Page = {page_number }',
Current_page: 5, // set the current page to 1 by default
Max_page: 40, // set the maximum page to 1 by default
Page_string: 'Current page {current_page}, total page {max_page ',
Paged: function (page ){
// Send back an event...
}
});

Parameter configuration: current_page
Initialize the current page number. The default value is 1.

Max_page
Set the maximum number of pages, which is usually filled by the total count of the data read from the database.

Page_string
The page number style displayed in the text box.

Callback Function
The callback function is required when you click the page number to jump to the corresponding page. The format is as follows:

paged: function(page) {      // Click the page number to perform operations          // If there is no refreshing page, you can write it as getDataByPage (page). Here getDataByPage is a method for obtaining the specified page number from the server.          // If it is a general dynamic or static page, it will jump directly to the corresponding page location. href = "view. aspx? Id = "+ page or location. href =" view-"+ page +". html" }

Again
The style of the plug-in is more European-style. It may be difficult for tianchao to look at it. As a front-end developer, the overall capacity is still available. It looks more friendly. 320X480 of small screen machines are not under pressure.

Browser compatibility
According to tests, there are no problems with mainstream browsers on the computer and mobile terminals, but note that if there is a culture, you need to make minor changes to adapt to some of the libraries that come with some browsers) forced (pa) functions, such as UC.

The UC browser provides the pre-read next page content function, which scans links with keywords such as the next page, the next page, and the next chapter, and loads the link content in advance, when the page is turned over, the page will be opened in seconds.

The problem arises. In the original usage of this plug-in, <a href = "#" class = "first" data-action = "first"> & laquo; </a>, the link address is actually loaded with link_string :'/? Page = {page_number} ', take the demo on the official website as an example. When you move the cursor to the next page, you can see that the address it loads is not correct.

It needs to click to generate a correct address and jump, but UC does not care so much, what address do you write it to directly read what address content, some versions even load the next page and directly overwrite the button events on the next page, jumping to the wrong address .. It is easy to avoid this situation. As long as you are not lazy, write the real address in <a href = ..

After the pre-reading is complete, the UC browser will not forget to force you to change the color style, and give you a link to set up a green hat or something, it is also drunk ..

A [ucautopagerstatus = "complete"] {

1. Position: relative;
2. Color: Rgb (0,128, 0) ;

}

With a green hat, the entire appearance of the clear (dou) (bi ..

Download: https://github.com/beneverard/jqPagination/zipball/master