【www.hj8828.com】DIY jquery plugin – tabs标签切换实现代码_jquery_脚本之家

Why DIY jquery tab 接触jquery
2,4个月了,一直都未入手写过插件。适逢其会近期可比闲,就准备把一向看不美貌的连串中现成的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 {
var settings = { activeTabClass: “tab-selected”, defaultTabClass:
“tab-default”, tabContainerClass: “tabContainer”, tabPanelCls:
“tabPanel”, mouseoverTabClass: null, hiddenTabClass: ‘tab-hide’,
tabPanel: null, selectHandler: null, iframeIdPrex: ‘iframe_’ }; if {
jQuery.extend; } //#region public events $.fn.setActiveTab = function {
if { return this.each { this.setActiveTab } }; $.fn.getFrameByTabId =
function { var iframeId = settings.iframeIdPrex + tabId; return
frames[iframeId]; } return null; }; //#endregion public events return
this.each { var ts = this; var $tabContainer = $; ts.activeTab = null;
ts.tabPanelId = null; ts.selectedTab = null; ts.selectedIndex = 0;
ts.iframeId = null; //#region ‘private’ methods this.setActiveTab =
function { if != “number”) { return; } var selectedTab = $(‘li:visible’,
$tabContainer).eq; if (selectedTab.length == 0) { return; } //click the
active tab if (ts.iframeId == settings.iframeIdPrex + selectedTab.attr {
return; } else { if { //$.hide; } } $(‘.’ + settings.activeTabClass,
$tabContainer).removeClass(settings.activeTabClass); ts.activeTab =
selectedTab; ts.activeTab.addClass(settings.activeTabClass); var target
= ts.activeTab.attr; if != ‘string’) { return; } ts.iframeId =
settings.iframeIdPrex + selectedTab.attr; if .length == 0) { var iframe
= $; iframe.attr .attr .css({ width: ‘100%’, height: ‘100%’ });
iframe.appendTo; } else { $.show(); } }; var initialTabs = function() {
$tabContainer.addClass(settings.tabContainerClass); $.addClass; var
stopFloatDiv = $; stopFloatDiv.css({ clear: ‘both’, height: ‘0px’ })
.insertAfter; $.each { var $tab = $; var $link = $; var href =
$link.attr; $link.attr; $tab.attr .addClass(settings.defaultTabClass)
.click { ts.selectedTab = $tab; ts.selectedIndex = i; if (typeof
(settings.selectHandler) == “function”) { settings.selectHandler(); }
else { ts.setActiveTab; }; //#endregion ‘private’ methods initialTabs;
//set first tab active as default. }); }; 德姆o 复制代码 代码如下: html code:

  • 博客园
  • www.hj8828.com,首页
  • 管理

javascript code: $.load { $.tab({ tabPanel: ‘#tabPanel’ }); })

screenshot:

Description parameter —
可自定义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 &&
getFrameByTabId 复制代码 代码如下:
setAcitveTab: set active tab by tab index. $.setActiveTab; //set the
second tab active. getFrameByTabId: get frame for a specific tab.
$.getFrameByTabId; //get the frame for home page. others 1.
此tab用了多个dom成分

,
是因为为了宽容tab文字的轻易大小,其背景用了三张图片,小编用了li突显左侧的圆角图片,a突显右侧的圆角,而span则平铺中间的背景。其实用三个图片也得以完成,做一个很短的有左圆角的的背景图片和贰个右圆角。但无论怎么为了有圆角效果加多了这一个抽象的要素,总是令人不爽。真是希望CSS3的圆角技能和三个dom成分可设置多张背景图能到很好的支撑。
2.
此插件扶助客户自定义切换tab事件,以协助特殊要求,如某tab页验证不经过,不让切换等。用法:
复制代码 代码如下: $.tab({ tabPanel:
‘#tabPanel’, selectHandler: function; //the function that you defined.
} }); 3.
tab插件里activeTab,selectedIndex属性等是为着让用户自定义tab切换事件是能获取与tab相关的音信,可根据本人的要求扩充。用法:
复制代码 代码如下: $.each { var $tabs =
this; var currentTabId = $tabs.activeTab.attr; //… }