开始使用:
$(*).Page({type},class); * 写入要插件要出现的HTML容器位置,{type}则是配置属性。比如:$('body').Page({});会出现body标签位置,并且会清除body内所有内容,calss是预设的css样式只要回执true就可以使用。
兼容性:里面基本没有用到css3的地方,代码全部基于jq编写 使用最新版就好,浏览器兼容 IE 78910 应该都没问题 其他最新就好。
常用配置属性更多查看js文件
$(".paging").Page({
page:1, // 当前页 默认第一页
pages:false, // 总页数 !必须配置 否则没有页数
pageNum:5, // 页码数 共显示多少个页码 默认5 建议设置 奇数 比较美观
search:true, // 是否跳转功能 true未开启 false为关闭 默认开启
TopDownpage:true, // 是否开启上一页 下一页功能 true未开启 false为关闭 默认开启
pageOn:false, // 点击页码时触发事件,默认关 建议填写!格式 pageOn:function(e){/* 你要 执行的代码*/}
searchOn:false, //点击跳转时触发事件,默认关 建议填写!格式 searchOn:function(e){/* 你要 执行的代码*/}
});
结构
<-div-> html 容器
<-ul-> /* 页码区
<-li->页码<-/li->
<-/ul-> */ 页码区结束
<-ul-> /* 跳转区
<-input->输入框
<-input->跳转按钮
<-/ul-> */ 跳转区结束
<-/div->html 容器结束
运用
$(".paging").Page({
Pages:<-?-php echo(总页数);-?->,
PageOn:function(e){$.post(".php",{
传递的页码:e
},function(data){$(要更新的容器).html(data)}},
JumpOn:function(e){$.post(".php",{
传递的页码:e
},function(data){$(要更新的容器).html(data)}},
},true);
这样就可以完成一个静态页面的刷新,简单的很~!