写了一个小DEMO,想着jQuery这么强大的库不容许未有tabs插件吧

screenshot:

自定义事件在日常的WEB开发中是非常常见的功能,用于封装自有组件定义自有API。实在是居家旅行,开发面试必备技能。

,
是因为为了兼容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; //… }

 代码如下

澳门新葡8455最新网站,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元素

<div class=”js-tabview”>
    <ul class=”tab”>
        <li class=”on tab-item”><a data-target=”#tab1″ href=””
class=”selected”>选项卡一</a></li>
        <li class=”tab-item”><a data-target=”#tab2″
href=””>选项卡二</a></li>
        <li class=”tab-item”><a data-target=”#tab3″
href=””>选项卡三</a></li>
    </ul>
    <div id=”tab1″ class=””>选项卡一对应的内容块</div>
    <div id=”tab2″
class=”is-hide”>选项卡二对应的内容块</div>
    <div id=”tab3″
class=”is-hide”>选项卡三对应的内容块</div>
</div>

  • 博客园
  • 首页
  • 管理

复制代码

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

已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些H5,CSS3以及移动互联网开发的书,等驾照考过之后就又要开启学习模式了。

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 {
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. }); }; Demo 复制代码 代码如下: html code:

 代码如下

复制代码

复制代码

复制代码

今天闲来无聊,也就把jQuery里面的几个点复习了一边,写了一个小DEMO。复习点是jQuery的自定义事件。

.is-hide{display:none;}

直接帖代码上来了。

之所以添加 .is-hide,是为了防止 fouc(flash of unstyled content),本来 js
中即可完成隐藏元素的结果。

    element.delegate(“li”, “click”, function () {
        //找到需要修改的目标
        var tabName = $(this).attr(“data-tab”);
        //点击选项卡触发自定义事件
        element.trigger(“change.tabs”, tabName);
    });

    return this;
}

    element.bind(“change.tabs”, function (e, tabname) {
        element.find(“li”).removeClass(“active”);
        element.find(“>[data-tab='” + tabname +
“‘]”).addClass(“active”);
    });

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图