一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

89 lines
1.5 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>分页 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
<div id="demo5"></div>
<div id="demo6"></div>
<div id="demo7"></div>
<script src="../src/layui.js"></script>
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
laypage({
cont: 'demo1'
,pages: 100 //总页数
,groups: 5 //连续显示分页数
});
laypage({
cont: 'demo2'
,pages: 100
,skin: '#1E9FFF'
});
laypage({
cont: 'demo3'
,pages: 100
,first: 1
,last: 100
,prev: '<em><</em>'
,next: '<em>></em>'
});
laypage({
cont: 'demo4'
,pages: 100
,first: false
,last: false
});
laypage({
cont: 'demo5'
,pages: 100
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值
});
laypage({
cont: 'demo6'
,pages: 5
,groups: 0
,first: false
,last: false
,jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +'页');
}
}
});
laypage({
cont: 'demo7'
,pages: 100
,skip: true
});
});
</script>
</body>
</html>