jQuery simplePage+AJAX plus分页插件用法实例
本文实例讲述了jQuerysimplePage+AJAXplus分页插件。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>simplePage</title>
<styletype="text/css">
html,body{margin:0auto;text-align:center;}
.main{font:12px/24px"MicrosoftYaHei";height:1000px;}
#page{margin:100pxauto;width:960px;text-align:center;}
#pagea{text-decoration:none;display:inline-block;height:24px;padding:08px;border-radius:3px;background-color:#DEF39E;color:#8CAC2C;text-align:center;margin:02px;}
#pagea:hover,#page.now{background-color:#8CAC2C;color:#fff;transition:all.5sease0s;}
</style>
</head>
<body>
<divclass="main">
<divid="page">
<!--
<ahref="#3">上一页</a>
<ahref="#4">4</a>
<ahref="#5">5</a>
<ahref="#6"class="now">6</a>
<ahref="#7">7</a>
<ahref="#8">8</a>
<ahref="#9">下一页</a>
-->
</div>
<divclass="back"></div>
</div>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
$.simplePage({
obj:"#page",
nowNum:1,
allNum:20,
callBack:function(now,all){
$(".back").html(now+"-"+all);
}
});
});
/*!
*jQuerysimplepageplusv1.0
*http://t.qq.com/websole
*Author:sole
*Mail:macore@163.com
*Created:2012/10/31
*Copyright2012-http://t.qq.com/websole
*/
$.extend({
//obj:分页对象;noeNum:当前页；allNum:总页数；callBack：回调函数
simplePage:function(opt){
if(!opt.obj){returnfalse;};
varobj=$(opt.obj);
varnowNum=opt.nowNum||1;
varallNum=opt.allNum||5;
varcallBack=opt.callBack||function(){};
varapd_ele="";
functionele(num,cls){
varstr="";
if(cls){
str="<ahref='#"+num+"'class='"+cls+"'>"+num+"</a>";
}else{
str="<ahref='#"+num+"'>"+num+"</a>";
}
returnstr;
}
if(nowNum>1){
apd_ele="<ahref='#"+(nowNum-1)+"'>上一页</a>";
obj.append(apd_ele);
}
if(allNum<=5){
for(vari=1;i<=allNum;i++){
if(nowNum==i){
apd_ele=ele(i,"now");
}else{
apd_ele=ele(i);
}
obj.append(apd_ele);
}
}else{
for(vari=1;i<=5;i++){
if(nowNum==1||nowNum==2){
if(nowNum==i){
apd_ele=ele(i,"now");
}else{
apd_ele=ele(i);
}
}elseif((allNum-nowNum)==0||(allNum-nowNum)==1){
if((allNum-nowNum)==0&&i==5){
apd_ele=ele((allNum-5+i),"now");
}elseif((allNum-nowNum)==1&&i==4){
apd_ele=ele((allNum-5+i),"now");
}else{
apd_ele=ele(allNum-5+i);
}
}else{
if(i==3){
apd_ele=ele(nowNum-3+i,"now");
}else{
apd_ele=ele(nowNum-3+i);
}
}
obj.append(apd_ele);
}
}
if((allNum-nowNum)>=1){
apd_ele="<ahref='#"+(nowNum+1)+"'>下一页</a>";
obj.append(apd_ele);
}
callBack(nowNum,allNum);
obj.find("a").click(function(){
varnowNum=parseInt($(this).attr("href").substring(1));
obj.html("");
$.simplePage({
obj:"#page",
nowNum:nowNum,
allNum:allNum,
callBack:callBack
});
returnfalse;
});
}
});
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。