jquery手机端列表分页样式js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery手机端列表分页样式js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery手机端列表分页样式</title>
<style>
*{margin:0px; padding:0px;}
body{margin:0 auto; font-size:12px; color:#666; font-family:"微软雅黑", Simsun;}
li{list-style:none;}
img{border:none;}
a, a:visited{text-decoration:none;}
.tong{ background:url(../images/images/sy-toubjing_03.gif) repeat-x 0px -11px; width:100%; height:40px;}
.wrap{ width:auto; max-width:320px; margin:0 auto;}
.center{ width:103%; margin:0 auto;}

/***************分页******************/
.fenye{ float:left; margin-top:10px;}
.fenye ul{ float:left; margin-left:32px; }
.fenye ul li{ float:left; margin-left:5px;padding: 4px 6px; border:1px solid #ccc;  font-weight:bold; cursor:pointer; color:#999;}
.fenye ul li a{ color:#999;}
.fenye ul li.xifenye{ width:38px; text-align:center; float:left; position:relative;cursor: pointer;}
.fenye ul li .xab{ float:left; position:absolute; width:39px; border:1px solid #ccc; height:123px; overflow-y: auto;overflow-x: hidden;top:-125px; background-color: #fff; display:inline;left:-1px; width:50px;}
.fenye ul li .xab ul{ margin-left:0; padding-bottom:0;}
.fenye ul li .xab ul li{ border:0; padding:4px 0px; color:#999; width:34px; margin-left:0px; text-align:center;}
</style>
</head>
<body>
<!--下一页--->
<div class="wrap" style="margin-top:300px;">
    <div class="fenye">
    	<ul>
        	<li id="first">首页</li>
            <li id="top" onclick="topclick()">上一页</li>
            <li class="xifenye" id="xifenye">
            	<a id="xiye">1</a>/<a id="mo">66</a>
                <div class="xab" id="xab" style="display:none">
                	<ul id="uljia">
                    	
                    </ul>
                </div>
            </li>
            <li id="down" onclick="downclick()">下一页</a></li>
            <li id="last">末页</li>
        </ul>
    
    </div>
</div>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/public.js" type="text/javascript"></script>
</body>
</html>

JS代码(public.js):

//分页的显示与隐藏$("#xifenye").click(function(a){
	$("#uljia").empty();
	$("#xab").toggle();
	//显示出的一共多少页var uljia=$("#uljia");
	var page=parseInt($("#xiye").html());
	//获取当前的页数var pages=parseInt($("#mo").html());
	//获取当前的总页数for(var i=1;
	i<=pages;
	i++){
	var H="<li onclick='fl("+i+","+pages+")'>"+i+"</li>";
	//添加一共多少页和点击事件uljia.append(H);
}
scrolltop(page);
}
)//点击分页显示的方法function fl(p1,p2){
	//var p=p1;
	$("#xiye").empty();
	$("#xiye").html(p1);
	//给显示的页数赋值}
//分页的的上一页和下一页function topclick(){
	var v=document.getElementById("xiye");
	var num=v.innerHTML;
	if(num>1){
	num--;
	v.innerHTML=num;
	var hei=25*num-25;
	$("#xab").scrollTop(hei);
}
}
function downclick(){
	var pages=parseInt($("#mo").html());
	//获取当前的总页数var v=$("#xiye");
	var num=parseInt(v.html());
	if(num < pages){
	num = ++num;
	v.html(num);
	scrolltop(num);
}
}
//分页的的首页和未页$("#first").bind("click",function(){
	var v=document.getElementById("xiye");
	v.innerHTML=1;
	scrolltop(v.innerHTML);
}
)$("#last").bind("click",function(){
	var v=document.getElementById("xiye");
	var l=document.getElementById("mo");
	v.innerHTML=l.innerHTML;
	scrolltop(v.innerHTML);
}
)//滚动条function scrolltop(top){
	var hei=25*top-25;
	$("#xab").scrollTop(hei);
}

附件:下载该文件资源,减少时间成本(增值服务)