But they have a lot of add-ons and no need, and there is no need for such a functional area to reference this library, for speed to consider it, of course, your server is OK, but in fact this effect is not necessary, but feel will be used, so it is packaged into class, for later use, but also for people who need to learn to use.
The following is just a simple demo, with the words you can edit the page number style, there is a default format. No nonsense, see for yourself, there are comments to use the instructions ... Class (3KB) use can refer to the demo, do not understand the use of can leave a message.
Later will slowly write some projects often encountered in the development of problems, as well as solutions, and you learn to share.
Jpage.js
Copy Code code as follows:
/* Sort tool by Funny ZAk <silenceacegmail.com> 2009-8-23
"Invocation mode var ZP = new Zakpage (parameter); Zp.init ();
This is the source content container, the paging result container, the navigation container, the page size, the one-on-one content callback function returns the Li object, the style of each Li, the selected style is null, or ""
, default start Page, formatted page number display format
function Zakpage (ID,PAGEC,NAVID,PAGESIZE,LIEVT,DS,SS,IDX,NAVP) {
This.obj = this;
This.pageid = ID;
This.pagec = PAGEC;
THIS.NAVC = Navid;
This.pagesize = pagesize | | 7;
this.lievt = Lievt | | Null
This.rcount = 0;
This.pagecount = 0;
This.cpage = 1;
This.ds = ds;
if (This.ds = = null) {This.ds = "";}
THIS.SS = SS;
if (THIS.SS = = null) {THIS.SS = "";}
This.idx = idx;
This.navpre = NAVP | | ["Total {$pcount} page/{$rcount}, current Cpage} page", "Home", "prev", "Next", "last"];
}
Zakpage.prototype = {
Init:function () {
document.getElementById (this.pageid). Style.display = "None";
This.rcount = document.getElementById (This.pageid). getElementsByTagName ("Li"). length;
var residue = this.rcount%this.pagesize;
var nums = parseint (this.rcount/this.pagesize);
This.pagecount = Nums;
if (residue!= 0) {this.pagecount = nums+1;}
This.gopage (THIS.IDX);
},
Guide:function () {
var nav = document.getElementById (THIS.NAVC);
var np = This.navpre;
nav.innerhtml = Np[0].replace ("{$rcount}", This.rcount). Replace ("{$pcount}", This.pagecount). Replace ("{cpage}", This.cpage);
Nav.appendchild (This.createa (np[1],1));
Nav.appendchild (This.createa (np[2],this.cpage-1));
Nav.appendchild (This.createa (np[3],this.cpage+1));
Nav.appendchild (This.createa (Np[4],this.pagecount));
},
Createa:function (Html,index) {
var AA = document.createelement ("a");
aa.innerhtml = html;
var o = this.obj;
Aa.onclick = function () {o.gopage (index);}
return AA;
},
Gopage:function (index) {
if (index>this.pagecount) {index=1;}
if (index<=0) {index = This.pagecount;}
This.cpage = index;
var ghtml = document.getElementById (THIS.PAGEC);
ghtml.innerhtml = "";
var pages = (index-1) *this.pagesize;
var pagee = pages+this.pagesize;
if (pagee>this.rcount) {pagee = This.rcount;}
for (Var i=pages;i<pagee;i++) {
var lil = document.createelement ("Li");
Lil.classname = This.ds;
lil.innerhtml = This.litem (i);
var sss = THIS.SS;
if (this.lievt!=null) {
Lil.lievt = this.lievt;
Lil.onclick = function () {
THIS.LIEVT (this);
This.classname = SSS;
}
}
Ghtml.appendchild (Lil);
}
This.guide ();
},
Litem:function (index) {
return document.getElementById (This.pageid). getElementsByTagName ("Li") [index].innerhtml;
}
}
Here is the complete test code, JS has been included
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <style type=" Text/css "> body {text-align:center; padding:20px 0 0 0; font-size:12px; } A {color: #000; font-size:12px; Cursor:pointer; UL, Li {margin:0; padding:0; List-style:none; }. contain {margin:0 auto; width:825px; Text-align:left; border:1px #000 Solid; padding:5px; Height:auto; LI.SD a,li.sd a:link,li.sd a:visited{background-color: #000; color: #FFF; font-size:13px;} </style> <title>jpage demo-by funnyzak</title> <script type= "Text/javascript" charset= "gb2312" & Gt /* Sort tool by Funny ZAk <silenceacegmail.com> 2009-8-23 "Invocation way var ZP = new Zakpage (parameter); Zp.init (); The parameter is the source content container, the paging result container, the navigation container, the pageSize, the singled out content callback function returns the Li object, the style of each Li, the selected style is null or "", the default Start page, formatted page number display format/function zakpage (id,pagec,navid,pagesize,lievt,ds , SS,IDX,NAVP) {this.obj = this; This.pageid = ID; This.pagec = PAGEC; THIS.NAVC = Navid; This.pagesize = pagesize | | 7; this.lievt = Lievt | | Null This.rcount = 0; This.pagecount = 0; This.cpage = 1; This.ds = ds; if (This.ds = = null) {This.ds = "";} THIS.SS = SS; if (THIS.SS = = null) {THIS.SS = "";} This.idx = idx; This.navpre = NAVP | | ["Total {$pcount} page/{$rcount}, current Cpage} page", "Home", "prev", "Next", "last"]; } Zakpage.prototype = {init:function () {document.getElementById (This.pageid). Style.display = "None"; This.rcount = document.getElementById (This.pageid). getElementsByTagName ("Li"). length; var residue = this.rcount%this.pagesize; var nums = parseint (this.rcount/this.pagesize); This.pagecount = Nums; if (residue!= 0) {this.pagecount = nums+1;} This.gopage (THIS.IDX); }, Guide:function () {var nav = document.getElementById (THIS.NAVC); var np = This.navpre; nav.innerhtml = Np[0].replace ("{$rcount}", This.rcount). Replace ("{$pcount}", This.pagecount). Replace ("{cpage}", This.cpage); Nav.appendchild (This.createa (np[1],1)); Nav.appendchild (This.createa (np[2],this.cpage-1)); Nav.appendchild (This.createa (np[3],this.cpage+1)); Nav.appendchild (This.createa (Np[4],this.pagecount)); }, Createa:function (Html,index) {var aa = document.createelement ("a"); aa.innerhtml = html; var o = this.obj; Aa.onclick = function () {o.gopage (index);} return AA; }, Gopage:function (index) {if (index>this.pagecount) {index=1;} if (index<=0) {index = This.pagecount;} This.cpage = index; var ghtml = document.getElementById (THIS.PAGEC); ghtml.innerhtml = ""; VAR pages = (index-1) *this.pagesize; var pagee = pages+this.pagesize; if (pagee>this.rcount) {pagee = This.rcount;} for (Var i=pages;i<pagee;i++) {var lil = document.createelement ("Li"); Lil.classname = This.ds; lil.innerhtml = This.litem (i); var sss = THIS.SS; if (this.lievt!=null) {lil.lievt = this.lievt; Lil.onclick = function () {this.lievt (this); This.classname = SSS; } ghtml.appendchild (Lil); } this.guide (); Litem:function (index) {return document.getElementById (This.pageid). getElementsByTagName ("Li") [index]. InnerHTML; } </script> </pead> <body> <div class= "contain" > <ul id= "jpage" > <li>php Constructor construct the formerUnderline is </li> <li>php read the file content code (TXT,JS, etc.) </li> <li>php the time complexity of using an array to reduce the program </li> <li>php Bar chart Implementation Code </li> <li>ajax+php Edge Learn five picture processing </li> <li>phpmyadmin configuration file Details (configuration) </li> <li> Another PHP paging class implementation code </li> <li>php Infinite Classification of tree class code </li> <li>asp.net text box full selection of implementation </li> <li>php ZIP file Decompression Class Code </li> li> all kinds of men and women scarf surround Law and text </li><li> Photoshop mouse painted melancholy maiden head </li> <li>photoshop A cute cartoon bee </li> <li>photoshop pull out the beautiful texture of the red-purple skin </li> <li>photoshop Classical oil painting effect of the treatment method </li> <li >photoshop uses filters and materials to create cool flame characters </li> <li>photoshop mouse painted beautiful sleeping princess </li> <li>photoshop gorgeous golden Jewel Crown < /li> <li>photoshop Pink characters photo </li> <li>photoshop beautiful purple character signature effect </li> <li>photoshop Dark Christmas Beauty whitening </li><li>photoshop blue fantasy trend Wallpaper making </li><li>photoshop color palette tutorial characters light gray texture complexion </li><li >photoshop Beautiful Christmas balls make </li><li>photoshop simple lighting word effect </li><LI>HTML/JS Mutual Conversion Tools-IE7 compatible version </li> <li>css online compression tools </li> <li>css shaping and optimization tools [compression] </li> <li>js minifier JS Compression </li> <li>packer_ Xeon JavaScript online encryption tool </li> <li>xhtml Code nested view tool [tag closure ]</li> <li> Cloud-dwelling community online conversion can realize all kinds of into the system </li> <li> online JS-foot tester detection JS error </li> <li> html into PHP, JavaScript and ASP's online tools </li> <li> Regular Expressions 30-minute Getting Started tutorial </li> <li> Regular Expressions basic information </li> <li> JavaScript Online reference manual </li> <li>vbscript Microsoft Official Reference Manual </li> <li>jquery Introductory Guide Tutorial </li> <li>asp Learn online manuals </li> <LI>PHP5 latest Chinese reference manual </li> <li>mysql</li> <li>sql Database Learning </li> < Li> commonly used advertising code </li> <li> Baidu recently included query </li> <li>alexa ranking query </li> <li>ip/domain name whois</li > <li> Web editor </li> <li>qq online forced chat tool enhanced revision </li> <li> Thunderbolt Express Special link encryption decrypt JS code </li> <li& gt; online reproduction of simplified </li> <li>html Chinese complete manual </li> <li>qVOD decryption Tool Max </li> </ul> <ul id= "Pagec" > </ul> </div> <div id= "Navs" ></div> <script type= "text/javascript" > Function bb (a) {alert (a.innerhtml);} var arr = ["{$rcount}record,total{$pcount}page currenpage{cpage}", "Indexpage", "PrevPage", "NextPage", "LastPage"]; var ZP = new Zakpage ("Jpage", "Pagec", "Navs", 15,bb,null,null,4,null); This is the default page number format//var ZP = new Zakpage ("Jpage", "Pagec", "Navs", 15,bb,null,null,4,arr); Custom page number format zp.init (); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
