分页效果

分页组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

默认分页

<div class="ui-page">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div>

居中效果

<div class="ui-page ui-page-center">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div>

右对齐

<div class="ui-page ui-page-right">
<div class="ui-page-other"><a href="" class="ui-btn ui-btn-yellow">保存排序</a></div>
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div>

间隔

<div class="ui-page ui-page-mid">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div>

颜色

<div class="ui-page ui-page-red">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div> <div class="ui-page ui-page-yellow">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div> <div class="ui-page ui-page-green">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div> <div class="ui-page ui-page-info">
<ul>
<li><a>总数:3358</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...168</a></li>
<li><a href="#">下一页</a></li>
<li><a>1/168</a></li>
</ul>
</div>

Js调用分页


<div class="ui-page ui-page-left" id="page1"></div>
<div class="ui-page ui-page-center" id="page2"></div>
<script>
$(function()
{
$("#page1").page(
{
totalnum:100,//总记录
totalpage:10,//总页数
thispage:1,//当前页数
num:5,
callback:function(e)
{
//返回点击的页数
console.log(e.clickpage)
}
});

$("#page2").page(
{
totalnum:200,//总记录
totalpage:20,//总页数
thispage:1,//当前页数
num:5,
callback:function(e)
{
//返回点击的页数
console.log(e.clickpage)
}
});
})
</script>

参数说明

参数 说明
ui-page-center 居中对齐
ui-page-right 右对齐
ui-page-mid 增加间隔
ui-page-red red色
ui-page-yellow yellow色
ui-page-green green色
ui-page-info info色