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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 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 组件化编程技巧
2009/06/06 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
一段实用的php验证码函数
2016/05/19 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
javascript call方法使用说明
2010/01/11 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
require.js中的define函数详解
2017/07/10 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
解决Python requests 报错方法集锦
2017/03/19 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
体育教育毕业生自荐信
2013/11/21 职场文书
小英雄雨来观后感
2015/06/09 职场文书
应收账款管理制度
2015/08/06 职场文书