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: 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'); //... }

　　推荐阅读

　　JS的Event事件对象使用方法

fasdf [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 事件对象获取统一的方法:(来源于网络) 复制代码 代码如下: function getEvent(event) { var ev = event || window.event; if (!ev>>>详细阅读

本文标题：DIY jquery plugin - tabs标签切换实现代码

地址：http://www.17bianji.com/kaifa2/JS/25248.html

 1/2    1