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>
jQuery组件系列：封装标签页（Tabs）的更多相关文章
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- [置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
- 类似Jquery ui 标签页(Tabs)
<div class="indexnew_tit"> <a href="javascript:;" class="on"& ...
- JS组件系列——封装自己的JS组件，你也可以
前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...
- JS组件系列——封装自己的JS组件
前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...
- JS组件系列——分享自己封装的Bootstrap树形组件：jqTree
前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第 ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- jQuery菜单，导航与标签页
一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单 法一: <!DOCTYPE html PUBLIC " ...
随机推荐
- Extjs给gridPanel添加单价双击事件和获取当前行的数据
有两个小属性,如下 this.on('rowdblclick', this.readContent, this); this.on('cellclick', this.gridCellClick, t ...
- 【2016-07-11】Qt远程部署失败，提示"没有那个文件或目录"的解决方法
首先明确一下,这里的部署失败与网络连接.ssh/scp/sftp等无关. 一般出现在删除了远端上的可执行文件,而本地程序未做明显改动时远程部署执行的时候. Qt应用程序输出中的提示信息如下: 究其原因 ...
- Session的使用(登录例案+其它页面访问)
本程序功能是使用Session将用户输入的用户名保存在Session中(登录成功情况下,登录失败不会有Session值),其它页面想访问时会先判断是否有之前存的Session值. 登录Login.ht ...
- Linux电源管理(11)_Runtime PM之功能描述
转自:http://www.wowotech.net/pm_subsystem/rpm_overview.html 1. 前言 终于可以写Runtime PM(后面简称RPM)了,说实话,蜗蜗有点小激 ...
- 解决Inno Setup制作安装包无法创建桌面快捷方式的问题
转自:http://yedward.net/?id=104 昨天想把个java程序做成exe安装软件,然后就去下载了Inno Setup这个软件安装包制作软件,Inno Setup这个软件确实非常好用 ...
- Windows 程序支持 Unicode
宽字符 阅读了 UTF-8 Everywhere 一文,推荐在程序中对于字符串都使用 UTF-8 编码.Unix-like 系统默认是支持 UTF-8 编码的Unicode字符串,标准库函数也默认支持 ...
- Codeforces Gym 100342J Problem J. Triatrip 求三元环的数量 bitset
Problem J. Triatrip Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100342/at ...
- sqlserver2008使用设置sa用户登录步骤
1.打开sql server 2008,使用windows身份验证. 2.成功登录后,点击安全性->登录名,“sa”右键选择属性,设置密码,勾选“强制密码实施策略”. 3.然后选择属性页下的“状 ...
- 水题 ZOJ 3869 Ace of Aces
题目传送门 水题,找出出现次数最多的数字,若多个输出Nobody //#include <bits/stdc++.h> //using namespace std; #include &l ...
- 贪心 Gym 100502E Opening Ceremony
题目传送门 /* 题意:有一堆砖块,每一次操作可以选择消去任意一行,也可以选择消去任意一列.求要消去所有的砖块需要最小的操作数 贪心:首先清楚的是消去最高列的最佳,消去第一行最佳,行列的顺序只对中间过 ...