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 " ...
随机推荐
- shell定时任务
1.认识Croncron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务:/sbin/se ...
- js 在myeclipse中报错
转myeclipse中的js文件报错 整理一下,希望帮到 遇到此问题的哥们.姐们. 方法一:myeclipse9 很特殊 和 myeclipse10 不一样,所以myeclipse9 不能使用该方 ...
- 【Chrome】手动下载和安装Adblock Plus的方法
由于强大的GFW,导致很多Google的站点没法访问,也就没法直接安装chrome的插件了,网页都打不卡, 那么几乎是必备的Adblock Plus如何下载安装呢? 1.访问官方网站: https:/ ...
- Net4.0---AspNet中URL重写的改进（转载）
转载地址:http://www.cnblogs.com/oec2003/archive/2010/07/27/1785862.html URL重写有很多的好处,如有利于SEO.便于记忆.隐藏真实路径使 ...
- Java Hour 26 Execution
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 26 Hours. Java 虚拟机启动的时候加载一个指定的类然后调用该类中的 ...
- 2016.7.8 计算机网络复习要点第四章之地址解析协议ARP
1.地址解析协议ARP:知道一个机器的IP地址,需要找到其相应的硬件地址:ARP协议的用途是为了从网络层使用的IP地址解析出在链路层使用的硬件地址: 2.由于是IP协议使用了ARP协议,因此通常就把A ...
- Kali Linux 2016.2发布提供虚拟机以及系统镜像下载
Kali Linux 2016.2发布提供虚拟机以及系统镜像下载 Kali Linux 2016.2发布提供虚拟机以及系统镜像下载,本次Kali Linux 2016.2提供了五种桌面模式,分别为 ...
- Windows自带Android模拟器启动失败
Windows自带Android模拟器启动失败 错误信息:[Critical] XDE Exit Code: InvalidArguments (3)XDE执行的第三个参数为设置内存值,形式为/mem ...
- POJ2441 Arrange the Bulls（状压DP）
题目是,有n头牛,每头牛都喜爱某几个草地,要把这n头牛分配给m个不同的它们喜爱的草地,问有几种分配方式. dp[n][S]表示前n头牛分配完毕后占用的草地集合是S的方案数 dp[0][0]=1 dp[ ...
- ural 1289. One Way Ticket
1289. One Way Ticket Time limit: 1.0 secondMemory limit: 64 MB A crowed of volunteers dressed in the ...