一款多功能实用的JS分页插件,有两种方式实现分页效果,演示页面已经跟出了示范了,分页的样式等可以自由调整的,喜欢的童鞋请收下吧。
页面的head部分,需引入JS插件和必要的CSS样式,并简单设置演示页面的样式,代码如下:
<script type="text/javascript" src='src/pagination.js'></script>
<link type="text/css" rel="stylesheet" href="src/page.css">
<style type="text/css">
body{
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.page{
width:1000px;
margin:0 auto;
overflow: hidden;
}
#d4,#d3{
height:400px;
width:500px;
float:left;
border:1px solid #efefef;
box-sizing:border-box;
}
h3{
text-align: center;
}
pre i{
color:#999;
}
</style>
页面的body部分,用了div容器的嵌套,结构不算复杂,代码如下:
<div class='page'>
<div id='d3'>
<h3>a 链接跳转实现分页效果</h3>
<pre>
page({
box:'d1',//存放分页的容器
href:'www.scopeman.cn/detail.html?page=',//跳转连接
page:8,//当前页码
count:15,//总页数
num:5,//页面展示的页码个数
})
</pre>
<div id='d1'></div>
展示多少页码:
<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='n'><br>
这里模式后传过来的总页数:
<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='m'><br>
这里模拟后端传过来的页码:
<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='id'><br>
<input type="button" style='outline:none;border:1px solid #0099ff;width:80px;height:32px;line-height:32px;border-radius:3px;font-size: 15px;background:#0099ff;color:#fff;' id='on' value='试一试'>
</div>
<div id='d4'>
<h3>Ajax 实现分页效果</h3>
<pre>
page({
box:'d2',//存放分页的容器
count:32,//总页数
num:8,//页面展示的页码个数
step:6,//每次更新页码个数
callBack:function(i){
//点击页码的按钮发生回调函数一般都是操作ajax
}
})
<h4 style='text-align:center;margin:0'>注意:num 要比step要大于等于2
(例如:num:8;那么step只能小于等于6)</h4>
</pre>
<div id='d2'></div>
<div id='dd'></div>
<div id='dt'></div>
</div>
</div>
<div style='width:1000px;margin:10px auto'>
<h2>可根据您的需求自定义样式:</h2>
我们的dom结构为<br>
<pre style='background:#000;color:#F92672;padding:10px;line-height:28px'>
div class='page-contain'<i>//最外层容器</i>
a href="" class='page-pre'>/a<i>//上箭头</i>
div class='page-box'><i>//页码器</i>
a href="">/a<i>//页码</i>
.......
/div
a href="" class='page-next'/a<i>//下箭头</i>
/div
<i>//根据上面的dom结构和class 我们很方便制定我需求的样式</i>
<i>//激活状态下我们对应的页码会添加active的class</i>
</pre>
</div>
页面的底部,需启用插件并设置好相应的参数,代码如下:
<script type="text/javascript">
page({
box:'d1',//存放分页的容器
href:'#?page=',//跳转连接
page:10,//当前页码
count:30,//总页数
num:5,//页面展示的页码个数
})
document.getElementById('on').addEventListener('click',function(){
var n = Number(document.getElementById('n').value);
var m = Number(document.getElementById('m').value);
var id = Number(document.getElementById('id').value);
if(m<id){alert('当前页不能大于总页数')}
else{
page({
box:'d1',//存放分页的容器
href:'#?page=',//跳转连接
page:id,//当前页码
count:m,//总页数
num:n,//页面展示的页码个数
})
}
})
page({
box:'d2',//存放分页的容器
count:20,//总页数
num:9,//页面展示的页码个数
step:6,//每次更新页码个数
callBack:function(i){
console.log(i);
//点击页码的按钮发生回调函数一般都是操作ajax
}
})
page({
box:'dd',//存放分页的容器
count:20,//总页数
num:6,//页面展示的页码个数
step:4,//每次更新页码个数
callBack:function(i){
console.log(i);
//点击页码的按钮发生回调函数一般都是操作ajax
}
})
page({
box:'dt',//存放分页的容器
count:22,//总页数
num:5,//页面展示的页码个数
step:3,//每次更新页码个数
callBack:function(i){
console.log(i);
//点击页码的按钮发生回调函数一般都是操作ajax
}
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791