这一次要分享的是以前写过的tab切换+分页,只是这次以面向对象的形式写出来。代码是基于jquery的,当然你也可以用原生JS来实现,不过得封装一些函数,不然甚是麻烦。
先说tabs组件,基于简单的考虑,我这个组件,只需要传两个参数,一个是触发器的元素数组,一个是切换内容的元素数组。个人感觉更好的,应该是要再传一个外层容器的ID,因为有时候可能触发器的class值会有重复的使用。当然,我的代码已经简单有了雏形,也懒得做出修改,大家可以在我的基础上进行再次加工。
page组件,无非考虑的是外层容器、分页容器、每页几条、根据什么元素来划分。当然这个分页算是一个假分页,因为真正的分页都是ajax请求。
好了,还是贴一下代码吧。
<!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>tab切换+分页</title>
<style type="text/css">
body{margin:0; font:12px/1.5 '\5b8b\4f53',sans-serif; color:#333;background:#eeefd3;padding:10px 10px 10px 50px;}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding-left:0;list-style-type:none;}
.tab_nav ul{zoom:1;}
.tab_nav ul:after{clear: both;display: block;content:'';font-size:0;visibility: hidden;}
.tab_nav li{float:left;width:100px;line-height:30px;cursor: pointer;border: red solid 1px;margin-right:10px;text-align: center;}
.tab_nav .current{color: green;background: red;}
.tab_content{margin-top:20px;width: 440px;height:170px;overflow: hidden;position: relative;}
.tab_content p{margin-bottom: 10px;}
.page{position: absolute;right:10px;bottom:0;text-align: right;}
.page a{display: inline-block;padding: 0 5px;margin: 0 3px;}
.page .current{color:red;}
</style>
</head>
<body>
<div class="tab_nav">
<ul>
<li class="current">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<div id="content1" class="tab_content">
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<div id="page1" class="page"></div>
</div>
<div id="content2" class="tab_content" style="display: none">
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<div id="page2" class="page"></div>
</div>
<div id="content3" class="tab_content" style="display: none">
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<div id="page3" class="page"></div>
</div>
<div id="content4" class="tab_content" style="display: none">
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第一条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第二条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第三条数据</p>
<p class="item">第四条数据</p>
<p class="item">第四条数据</p>
<p class="item">第四条数据</p>
<div id="page4" class="page"></div>
</div>
<script type="text/javascript" src="http://pc1.gtimg.com/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/**
* 简单的Tab组件
* @param tabnav 导航元素数组
* @param tabcon 内容元素数组
*/
var Tabs = function(tabnav, tabcon) {
this.tabnav = tabnav;
this.tabcon = tabcon;
this.init.apply(this,arguments);
};
Tabs.prototype = {
init:function() {
var _this = this;
this.tabnav.each(function(i, oli) {
$(oli).click(function() {
_this.tabnav.removeClass("current");
$(this).addClass("current");
_this.tabcon.css("display", "none");
_this.tabcon.eq(i).css("display", "block");
})
})
}
};
/**
* 简单分页组件
* @param config
* maxpage 每页几条 必须
* box 容器ID
* dataclass 按什么元素来划分,通常取class,因为有时候不一定以li元素为划分
* pagebox 分页容器ID
*/
var Page = function(config) {
this.maxpage = config.maxpage || 10;
this.containbox = $(config.containbox);
this.dataclass = config.dataclass || "item";
this.pagebox = $(config.pagebox);
this.linum = $(this.dataclass,this.containbox).length;
this.init.apply(this,arguments);
}
Page.prototype = {
init:function() {
//先清空分页元素里面的内容
this.pagebox.html("");
var totalpage = this.linum / this.maxpage;
//向上舍入,比如有8条数据,8除6是1点几,Math.ceil的作用是让它变成2
totalpage = Math.ceil(totalpage);
//如果只有一页,那么没必要有这个分页的内容
if (totalpage <= 1) {
return;
}
this.current = 1;//存储当前页
this.totalpage = totalpage;//存储总页数
var str = "";
for (var i = 0; i < this.totalpage; i++) {
var c = "";
if (i == 0) {
c = " current";
}
str += '<a href="javascript:;" class="pagenum' + c + '">' + (i + 1) + '</a>';
}
str = '<a class="prebtn" href="javascript:;"><< 上一页</a>' + str + '<a class="nextbtn" href="javascript:;">下一页 >></a>';
this.pagebox.html(str);
this.pagenums = $(".pagenum",this.containbox);
var _this = this;
this.goPage(1);
this.pagenums.each(function(i,npage){
$(npage).click(function(){
_this.goPage(this.innerHTML);
});
})
$(".prebtn",this.containbox).click(function(){
_this.goPrev(_this.current);
});
$(".nextbtn",this.containbox).click(function(){
_this.goNext(_this.current);
});
},
goPage:function(num) {
this.current = num;
this.pagenums.removeClass("current");
this.pagenums.eq(num-1).addClass("current");
var dataobjs = $(this.dataclass,this.containbox);
dataobjs.each(function(i,itemdata){
$(itemdata).css("display","none");
});
for (var i = (num - 1) * this.maxpage; i < num * this.maxpage; i++) {
if (i < this.linum) {
dataobjs.eq(i).css("display","block");
}
}
},
goPrev:function(num) {
if (num == 1) {
return;
}
this.current --;
this.goPage(this.current);
},
goNext:function(num) {
if (num == this.totalpage) {
return;
}
this.current ++;
this.goPage(this.current);
}
};
(function() {
//tab切换的代码
var tab = new Tabs($(".tab_nav li"), $(".tab_content"));
//分页的代码
var page1 = new Page({
containbox:"#content1",
maxpage:"6",
dataclass:".item",
pagebox:"#page1"
});
var page2 = new Page({
containbox:"#content2",
maxpage:"6",
dataclass:".item",
pagebox:"#page2"
});
var page3 = new Page({
containbox:"#content3",
maxpage:"6",
dataclass:".item",
pagebox:"#page3"
});
var page4 = new Page({
containbox:"#content4",
maxpage:"6",
dataclass:".item",
pagebox:"#page4"
});
})();
</script>
</body>
</html>