jQuery组件系列：封装标签页（Tabs）
我自己封装的组件，你也行，静态链接地址
http://www.cnblogs.com/leee/p/5190489.html
声明。最好，先把代码拷过去运行一下，其实特别丑~再往下看
我没优化，因为我木时间，上班呢。这篇文章是证明我能写组件的能力的。
需要明白的的知识点
- $.data缓存读 写
- prop()js对象属性和attr() DOM属性区别
- this作用域（谁调用，this指向谁）
- call改变作用域this，木用apply，数组麻烦
- 原型啥东东
<!DOCTYPE>
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font: 12px/1.5 arial;
}
li
{
list-style: none;
}
/* #wrap{width:80%; margin:20px auto;}*/
.hide
{
display: none;
}
#tab-title
{
height: 27px;
border-bottom: 1px solid #ccc;
background: red;
overflow: hidden;
}
/*#ccc*/
#tab-title li
{
line-height: 26px;
min-width: 50px;
float: left;
margin: 0 4px;
text-align: center;
border: 1px solid #ccc;
border-bottom: none;
background: green;
cursor: pointer;
}
/*#f5f5f5;min-width:80px; width:80px; */
#tab-title .active
{
line-height: 27px;
background: #fff;
}
#tab-content
{
border: 1px solid #ccc;
border-top: none;
padding: 20px;
}
.closed-icon
{
float: right;
margin-right: 3px;
display: block;
height: 16px;
width: 16px;
background: url('img/tabs_icons.png') no-repeat -32px center;
}
/*ie 6 7导致父节点li变高，需要处理*/
.closed-icon:hover
{
background: blue url('img/tabs_icons.png') no-repeat -32px center;
}
/*ie6不支持，需要处理*/
</style>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
function _initTab(obj, param) {
///<summary>初始化所有tab（1添加序号index，2注册click事件,3注册点击图标click，添加序号index，删除事件）</summary>
var tabtitleEle, tabContentEle;
tabtitleEle = $("#tab-title li");
tabContentEle = $("#tab-content div");
for (var i = 0; i < tabtitleEle.length; i++) {
tabtitleEle[i].index = i; //加上一个property
tabContentEle[i].index = i;
tabtitleEle.eq(i).click(function () {
titleRemoveActiveNotThis(tabtitleEle, this.index);
contentAddHideNotThis(tabContentEle, this.index);
})
}
_iconClose();
_setStyle(obj, param);
}
function titleRemoveActiveNotThis(obj, index) {
///<summary>移除所有tab选中状态，为当前点击tab设置选中</summary>
obj.removeClass("active").eq(index).addClass("active");
}
function contentAddHideNotThis(obj, index) {
///<summary>隐藏所有tab，为当前点击tab移除隐藏</summary>
obj.addClass("hide").eq(index).removeClass("hide");
}
function _iconClose() {
///<summary>点击关闭按钮时，关闭某一tab</summary>
$(".closed-icon").unbind('click');
$(".closed-icon").click(function () {
var index = $(this).parent("li").prop("index");
$("#tab-title li").eq(index).remove();
$("#tab-content div").eq(index).remove();
_registorIndex();
if (!$("#tab-title .active").prop("index")) {
$("#tab-title li:last").addClass("active");
$("#tab-content div:last").removeClass("hide");
}
})
}
function _registorIndex() {
var tabtitleEle, tabContentEle;
tabtitleEle = $("#tab-title li");
tabContentEle = $("#tab-content div");
for (var i = 0; i < tabtitleEle.length; i++) {
tabtitleEle[i].index = i; //加上一个property
tabContentEle[i].index = i;
}
}
function _setStyle(obj) {
///<summary>设置用户设置的样式</summary>
///<param name="obj" type="object">目标</param>
var state = $.data($(obj)[0], "tabs");
// alert('111');
if (state) {
// alert('2222');
if (state["width"]) {
obj.children("#tab-title").children("li").css("width", state["width"]);
}
if (state["height"]) {
liHeight = parseInt(state["height"]) + 1 + 'px';
obj.children("#tab-title").css("height", liHeight).children("li").css("line-height", state["height"]);
obj.children("#tab-title").children(".active").css("line-height", liHeight);
}
}
}
function _addTab(obj, param) {
///<summary>添加一个tab，并重新初始化</summary>
/// <param name="which" type="object">{title:"插件加",content:"",...}</param>
var opts = $.data($(obj)[0], "tabs");
// alert(opts['onAdd']);
if (opts) {
opts.onAdd.call(obj[0], obj, param);
}
if (obj.children("#tab-title").children("li").length > 0) {//children()方法里面用层级选择器不能选中
obj.children("#tab-title").children("li").removeClass("active");
obj.children("#tab-title").children("li:last").after('<li class="active">' + param.title + '<span class="closed-icon"></span></li>');
}
else {
obj.children("#tab-title").append('<li class="active">' + param.title + '<span class="closed-icon"></span></li>');
}
if (obj.children("#tab-content").children("div").length > 0) {
obj.children("#tab-content").children("div").addClass("hide");
obj.children("#tab-content").children("div:last").after('<div>' + param.content + '</div>')
} else {
obj.children("#tab-content").append('<div>' + param.content + '</div>');
}
_initTab(obj, param);
}
function _closeTab(obj, which) {
/// <param name="which" type="string/number">选项卡面板的标题或者索引（默认从0开始）</param>
var index = which;
var titleli = obj.children("#tab-title").children("li");
var contentdiv = obj.children("#tab-content").children("div");
if (typeof which == 'number') {
titleli.eq(index).remove();
contentdiv.eq(index).remove();
if (!$("#tab-title .active").prop("index")) {//处理:被删的tab是，最后一个、选中
$("#tab-title li:last").addClass("active");
$("#tab-content div:last").removeClass("hide");
}
}
else if (typeof which == 'string') {
for (var i = 0; i < titleli.length; i++) {
if ($(titleli[i]).text() == which) {
$(titleli[i]).remove();
$(contentdiv[i]).remove();
if (!$("#tab-title .active").prop("index")) {
$("#tab-title li:last").addClass("active");
$("#tab-content div:last").removeClass("hide");
}
break;
}
}
}
_initTab(obj);
}
//1.定义jquery的扩展方法Tab
$.fn.Tab = function (options, param) {
/// <summary>
/// 实例方法（原型）
/// </summary>
/// <param name="options" type="string">方法名</param>
/// <param name="param" type="object">字符串或者json对象</param>
if (typeof options == 'string') {
//如果是字符串（方法和（属性事件同用）不同用），代表方法，加“return”好处1，执行对应的方法2，不再往下执行
return $.fn.Tab.methods[options](this, param); //this调用，然后木用
}
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.Tab.defaults, options || {});
if (!$.data(this[0], "tabs")) {
$.data(this[0], "tabs", options)
//$.data($(this)[0], "tabs", options)
// alert($.data($(this)[0], "tabs").width);
}
//3.添加默认值
_setStyle(this);
}
//5.如果传过来的是字符串，代表调用方法。
$.fn.Tab.methods = {
tabs: function (obj) {//在文档中，相当木有参数
obj.html('<ul id="tab-title"></ul><div id="tab-content"></div>')
},
add: function (obj, param) {
_addTab(obj, param)
},
close: function (obj, which) {
_closeTab(obj, which)
},
exists: function (obj) {
},
update: function (obj) {
}
};
//6.默认参数列表
$.fn.Tab.defaults = {
width: null,
height: null,
onAdd: function (obj, param) { },
close: function () { },
onBeforeClose: function () { },
onClose: function (value) { },
onSelect: function () { }
};
})(jQuery);
$(function () {
$("#wrap").Tab("tabs");
$("#wrap").Tab({
width: "300px",
height: "150px"
})
$("#wrap").Tab({
width: "80px",
height: "27px",
onAdd: function (o, p) {
//alert('1');
}
})
$("#wrap").Tab("add", {
title: "插件加的标题1",
content: "11111111111"//<iframe src='https://www.baidu.com'></iframe>
});
$("#wrap").Tab("add", {
title: "插件加的标题2",
content: "1222221222222"//"<iframe src='https://www.baidu.com'></iframe>"
});
$("#wrap").Tab("add", {
title: "插件加的标题3",
content: "11133333333"//"<iframe src='https://www.baidu.com'></iframe>"
});
$("#wrap").Tab("add", {
title: "插件加的标题4",
content: "1114444444444"//"<iframe src='https://www.baidu.com'></iframe>"
});
var index = 1;
$("#wrap").Tab("close", index);
/* var title = "插件加的标题3";
$("#wrap").Tab("close", title);*/
})
</script>
</head>
<body>
<div id="wrap">
<!--<ul id="tab-title">
<li class="active">选项1<span class="closed-icon"></span></li>
<li>选项2<span class="closed-icon"></span></li>
<li>选项3<span class="closed-icon"></span></li>
<li>选项4<span class="closed-icon"></span></li>
</ul>
<div id="tab-content">
<div>
内容1</div>
<div class="hide">
内容2</div>
<div class="hide">
内容3</div>
<div class="hide">
内容4</div>
</div>-->
</div>
</body>
</html>
知识没有高低贵贱之分。
