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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
js实现简单选项卡制作
Aug 05 Javascript
原生js实现贪吃蛇游戏
Oct 26 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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python之django母板页面的使用
2018/07/03 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
如何使用Python调整图像大小
2020/09/26 Python
运行Python编写的程序方法实例
2020/10/21 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
python性能测试工具locust的使用
2020/12/28 Python
Linux的主要特性
2014/10/06 面试题
出国签证在职证明
2014/01/16 职场文书
高二物理教学反思
2014/02/08 职场文书
商业项目策划方案
2014/06/05 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书