DIY jquery plugin - tabs标签切换实现代码


Posted in Javascript onDecember 11, 2010

Why DIY jquery tab
接触jquery 2,3个月了,一直都未动手写过插件。正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多)。
想着jQuery这么强大的库不可能没有tabs插件吧,赶紧搜了一下,哈,果然!jQuery tabs!心里一阵窃喜,赶紧load下来用用吧。可查看了一下它的用法,才发现不太适用现有的项目耶,我们的tab每一个都对应着一个完整的页面,是用iframe嵌入的。而jQuery tabs似乎并没有支持iframe哦。那就改造一下吧?得从头到尾研究它的代码吧,头疼!还不如自己写一个得了,正好练练手,哈哈。说干就干,由此便诞生了我的第一个jQuery插件。

Code

/* 
* jquery.tab 
* Author: 冬日小草 
* Date: 2010/12/07 
*/ 
jQuery.fn.tab = function(options) { 
var settings = 
{ 
activeTabClass: "tab-selected", 
defaultTabClass: "tab-default", 
tabContainerClass: "tabContainer", 
tabPanelCls: "tabPanel", 
mouseoverTabClass: null, 
hiddenTabClass: 'tab-hide', 
tabPanel: null, 
selectHandler: null, 
iframeIdPrex: 'iframe_' 
}; if (options) { 
jQuery.extend(settings, options); 
} 
//#region public events 
$.fn.setActiveTab = function(tabIndex) { 
if (tabIndex) { 
return this.each(function() { 
this.setActiveTab(tabIndex); 
}) 
} 
}; 
$.fn.getFrameByTabId = function(tabId) { 
if (tabId) { 
var iframeId = settings.iframeIdPrex + tabId; 
return frames[iframeId]; 
} 
return null; 
}; 
//#endregion public events 
return this.each(function() { 
var ts = this; 
var $tabContainer = $(ts); 
ts.activeTab = null; 
ts.tabPanelId = null; 
ts.selectedTab = null; 
ts.selectedIndex = 0; 
ts.iframeId = null; 
//#region 'private' methods 
this.setActiveTab = function(tabIndex) { 
if (typeof (tabIndex) != "number") { 
return; 
} 
var selectedTab = $('li:visible', $tabContainer).eq(tabIndex); 
if (selectedTab.length == 0) { 
return; 
} 
//click the active tab 
if (ts.iframeId == settings.iframeIdPrex + selectedTab.attr('id')) { 
return; 
} 
else { 
if (ts.iframeId != null) { 
//$(frames[activeTabId]).hide(); 
$("iframe").hide(); 
} 
} 
$('.' + settings.activeTabClass, $tabContainer).removeClass(settings.activeTabClass); 
ts.activeTab = selectedTab; 
ts.activeTab.addClass(settings.activeTabClass); 
var target = ts.activeTab.attr('target'); 
if (typeof (target) != 'string') { 
return; 
} 
ts.iframeId = settings.iframeIdPrex + selectedTab.attr('id'); 
if ($('#' + ts.iframeId).length == 0) { 
var iframe = $('<iframe></iframe>'); 
iframe.attr('id', ts.iframeId) 
.attr('src', target) 
.css({ width: '100%', height: '100%' }); 
iframe.appendTo(settings.tabPanel); 
} 
else { 
$('#' + ts.iframeId).show(); 
} 
}; 
var initialTabs = function() { 
$tabContainer.addClass(settings.tabContainerClass); 
$(settings.tabPanel).addClass(settings.tabPanelCls); 
var stopFloatDiv = $('<div></div>'); 
stopFloatDiv.css({ clear: 'both', height: '0px' }) 
.insertAfter($tabContainer); 
$('li', $tabContainer).each(function(i) { 
var $tab = $(this); 
var $link = $('a', $tab); 
var href = $link.attr('href'); 
$link.attr('href', "#"); 
$tab.attr('target', href) 
.addClass(settings.defaultTabClass) 
.click(function(e) { 
ts.selectedTab = $tab; 
ts.selectedIndex = i; 
if (typeof (settings.selectHandler) == "function") { 
settings.selectHandler(); 
} 
else { 
ts.setActiveTab(i); 
} 
}) 
}); 
}; 
//#endregion 'private' methods 
initialTabs(); 
ts.setActiveTab(0); //set first tab active as default. 
}); 
};

Demo
html code: 
<ul id="tabs"> 
<li id="tabBlog"><a href="blog.htm"><span>博客园</span></a></li> 
<li id="tabHome"><a href="home.htm"><span>首页</span></a></li> 
<li id="tabManagement"><a href="management.htm"><span>管理</span></a></li> 
</ul> 
<div id="tabPanel"> 
</div> javascript code: 
$(window).load(function() { 
$('#tabs').tab({ 
tabPanel: '#tabPanel' 
}); 
})

screenshot:

DIY jquery plugin - tabs标签切换实现代码
Description
parameter(optional) -- 可自定义tab的样式,触发tab的事件等。默认值如下:

var settings = 
{ 
activeTabClass: "tab-selected", //css for active tab 
defaultTabClass: "tab-default", //css for inactive tabs 
tabContainerClass: "tabContainer", //css for the tab container 
tabPanelCls: "tabPanel", //css for the panel that contains the iframe 
mouseoverTabClass: null, //css for tab when mouse over it 
hiddenTabClass: 'tab-hide', //css for the hidden tab 
tabPanelId: null, //the panel id which is used for include iframe 
selectHandler: null, //event handler when user switch tab 
iframeIdPrex: 'iframe_' //the id prex for iframe, it's useful for getting iframe by tab id. 
};

public methods -- setActiveTab(tabIndex) && getFrameByTabId(tabId)
setAcitveTab: set active tab by tab index. 
$('#tabs').setActiveTab(1); //set the second tab active. 
getFrameByTabId: get frame for a specific tab. 
$('#tabs').getFrameByTabId("tabHome"); //get the frame for home page.

others
1. 此tab用了三个dom元素<li><a><span>, 是因为为了兼容tab文字的任意大小,其背景用了三张图片,我用了li呈现左边的圆角图片,a呈现右边的圆角,而span则平铺中间的背景。其实用两个图片也可以实现,做一个很长的有左圆角的的背景图片和一个右圆角。但不管如何为了有圆角效果添加了这些无意义的元素,总是让人不爽。真是希望CSS3的圆角技术和一个dom元素可设置多张背景图能到很好的支持。
2. 此插件支持用户自定义切换tab事件(selectHandler),以支持特殊需求,如某tab页验证不通过,不让切换等。用法:
$('#tabs').tab({ 
tabPanel: '#tabPanel', 
selectHandler: function() { 
switchTab(); //the function that you defined. 
} 
});

3. tab插件里activeTab,selectedIndex属性等是为了让用户自定义tab切换事件是能得到与tab相关的信息,可根据自己的需要扩展。用法:
$('#tabs').each(function() { 
var $tabs = this; 
var currentTabId = $tabs.activeTab.attr('id'); 
//... 
}
Javascript 相关文章推荐
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
javascript编写简易计算器
May 06 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
为超链接加上disabled后的故事
Dec 10 #Javascript
input按钮的事件处理大全
Dec 10 #Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 #Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 #Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 #Javascript
Javascript将string类型转换int类型
Dec 09 #Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP curl使用实例
2015/07/02 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
用python实现学生管理系统
2020/07/24 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
女方回门宴答谢词
2014/01/14 职场文书
大学专科求职信
2014/07/02 职场文书
护理工作个人总结
2015/03/03 职场文书
汉字听写大会观后感
2015/06/12 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript