DIY jquery plugin - tabs

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');

          //...

  }

转载于:https://www.cnblogs.com/yonghua/archive/2010/12/09/1900474.html