js實現簡單百度分頁和兩種tab樣式切換簡單實現

y_keven發表於2014-11-24
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;
	}
}


相關文章