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之十 事件模块概述
Jun 27 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
原生JS实现分页
Apr 19 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
基于mysql的论坛(2)
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python的几种主动结束程序方式
2019/11/22 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python打包多类型文件的操作方法
2020/09/21 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
销售代表求职自荐信
2013/10/01 职场文书
物流管理专业自荐信
2014/06/23 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
学雷锋主题班会教案
2015/08/13 职场文书