您的位置:首页 > Web前端 > CSS

js实现简单百度分页和两种tab样式切换简单实现

2014-11-24 14:37 609 查看
1、分页
/*
*分页
*/
var size = data.count;   //总页数
var spage = (page - 1) < 1 ? 1 : (page - 1);
var pagehtml = "<a href=\"#\" onclick=\"javascript:getBookList(" + spage + ");\"><span><</span></a>";
var firstpage = "0.5";
var endpage = 10;
//当页数过多时用来隐藏一部分
for(var p = page;p>0;p--){
firstpage = p/5+"";
if(firstpage.indexOf(".") == -1){
firstpage = p;
endpage = firstpage + 10;
break;
}
}
try{
if(firstpage.indexOf(".") != -1){
firstpage = 1;
endpage = 10;
}
}catch(e){
}
if (endpage > size) {
endpage = size;
}
for (var j = firstpage; j <= endpage; j++) {
var cl = "";
if (page == j) {
cl = "now";
}
pagehtml += "<span><a href=\"#\" class=\"" + cl + "\" onclick=\"javascript:startBook(" + j + ")\">"+ j + "</a></span>";
}
pagehtml += "共" + size + "页 转到第<input type=\"text\" size=\"3\" id=\"toPage\"/>页";
pagehtml += "<a class=\"btn\" href=\"#\" onclick=\"startBook(0)\"><span>跳转</span></a>";
$("#pagehtml").html(pagehtml);
/**
*开始执行
*/
function startBook(page,zone){
if(K17.isEmpty(page) || page == 0) //跳转使用
page = $("#toPage").val();
if(!isLegalPage(page)){
alert("请输入合法的页数");
return;
}
//封装条件,封装调用一个ajax请求函数
}

2.tab切换
两种切换样式实现的tab切换效果
<div class="link1">
<a class="m now" href="#" onclick="javascript:startBook(this,1,1);" id="1">男生 </a>
<a class="w" href="#" onclick="javascript:startBook(this,1,2);" id="2">女生 </a>
</div>
<div class="link2">
<a class="m" href="#" onclick="javascript:startBook1(this,1,1);" id="1">tab1 </a>
<a class="w" href="#" onclick="javascript:startBook1(this,1,2);" id="2">tab2 </a>
<a class="w" href="#" onclick="javascript:startBook1(this,1,3);" id="3">tab3 </a>
</div>
/**
*为当前tab新增样式
*/
function startBook(obj,page,zone){
$(".link1 a").removeClass("now");
$(obj).addClass("now");
var zone = $(".link1 .now").attr("id");
alert(zone);
}
/**
*更换样式
*/
function startBook1(obj,page,zone){
$(".link2 a").removeClass("m").addClass("w");
$(obj).removeClass("w").addClass("m");
var zone = $(".link2 .m").attr("id");
alert(zone);
}
/**
* 判读是否是合法的页数
*/
function isLegalPage(page){
//判读是否是数字
if(page!=""&&!isNaN(page)){
var posiNum = /^[0-9]*[1-9][0-9]*$/;
//判读是否是正整数
if(posiNum.test(page))
return true;
else
return false;
}else{
return false;
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: