Heim >Web-Frontend >js-Tutorial >DIY jquery plugin - tabs标签切换实现代码_jquery

DIY jquery plugin - tabs标签切换实现代码_jquery

WBOY
WBOYOriginal
2016-05-16 18:14:121138Durchsuche

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.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 = $('
');
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:




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元素
  • , 是因为为了兼容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');
    //...
    }
  • Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn