The example effect diagram is as follows
Instructions for use
Need to use jquery library files and jquery pager library files (current version 1.1)
Material Preparation
The pager CSS style file, which can be copied as the following CSS style, named Pager.css
Copy Code code as follows:
#pager Ul.pages {
Display:block;
Border:none;
Text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}
#pager ul.pages Li {
List-style:none;
Float:left;
border:1px solid #ccc;
Text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}
#pager ul.pages Li:hover {
border:1px solid #003f7e;
}
#pager ul.pages Li.pgempty {
border:1px solid #eee;
Color: #eee;
}
#pager ul.pages Li.pgcurrent {
border:1px solid #003f7e;
Color: #000;
font-weight:700;
Background-color: #eee;
}
Instance Code
one, including the file section
Copy Code code as follows:
<link href= "Pager.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.pager.js" type= "Text/javascript" ></script>
A CSS style file, two JS library files.
two, HTML section (page splitter display div)
Copy Code code as follows:
<H1 id= "result" > Gifted blog jquery pager <div id= "Pager" ></div>
three, JavaScript section (jquery plugin jquery pager pager call)
Copy Code code as follows:
<script type= "Text/javascript" language= "JavaScript" >
$ (document). Ready (function () {
$ ("#pager"). Pager ({pagenumber:1, pagecount:15, Buttonclickcallback:pageclick});
});
Pageclick = function (pageclickednumber) {
$ ("#pager"). Pager ({pagenumber:pageclickednumber, pagecount:15, Buttonclickcallback:pageclick
});
$ ("#result"). HTML ("The Essential blog jquery page is currently the first" + Pageclickednumber + "page");
}
</script>
Four, JavaScript code (JQuery pager Call) analysis
(1) $ ("#pager"). Pager ({});
PageNumber, indicating the initial number of pages, such as: 1
PageCount, representing the total number of pages, such as: 15
Buttonclickcallback, which means to click the page Number button to invoke the method, such as: Pageclick
(2) Pageclick = function (Pageclickednumber) {} part
Pageclick, which represents the function method for customizing the number of page clicks, such as: function (Pageclickednumber) {}
jquery plug-in jquery pager page only needs the starting page pagenumber, the maximum number of pages PageCount, the call to the page when the Buttonclickcallback function method can achieve JavaScript paging functionality , the actual application can only be used for simple modification of the Pageclick method, such as the PageNumber and PageCount set as variables, can be passed through the method of the page, JQuery Pager can achieve JavaScript paging function, Others can be expanded, while the jquery plug-in jquery pager paging Buttonclickcallback method to achieve a rich dynamic effect for reference.
Demo Code: http://demo.jb51.net/js/jquery-pager/index.html
