jquery插件（選項卡）

很早之想就學習jquery的插件寫法，一直拖到如今，今天趁着沒什麼工做忙，搜索些資料學習下，寫了個比較簡單的選項卡效果。

 

剛開始有看到一個很通俗易通的例子：alert對話框。

jquery.alertMsg.js

 1 /**
 2  * [description]
 3  * @param  {[type]} $ [description]
 4  * @return {[type]}   [description]
 5  */
 6 (function($){
 7 
 8   $.fn.alertMsg = function(options) {
 9 
10     var defaults = {
11       mouseEvent: 'clcik',
12       msg: 'hello world'
13     }
14     var options = $.extend(defaults, options);
15     var $this = $(this);
16 
17     $this.on(options.mouseEvent, function(e){
18       alert(options.msg);
19     })
20   }
21 
22 })(jQuery)

調用方式：

<span id="test">test</span>

$(function(){
    $('#test').alertMsg({
        mouseEvent : "click",  
        msg : "第一次寫插件!"  
    });
});

 

jQuery插件結構

 1 (function($){
 2     // tabs 自定義的插件名稱
 3     $.fn.tabs = function(options) {
 4 
 5         // 設置默認參數
 6         var defaults = {
 7             activeClass: 'active'
 8             ... 
 9         }
10         // 對象擴展
11         var options = $.extend(defaults, options);
12 
13         return $(this).each(function(){
14             // 編寫相應實現代碼
15         })
16     }
17 
18 })(jQuery)

 

選項卡實現：

一、HTML結構

<div id="tab">
    <ul>
        <li>選項1</li>
        <li>選項2</li>
        <li>選項3</li>
        <li>選項4</li>
    </ul>
    <div id="tabCon" class="tab-con">
        <div>1的內容</div>
        <div>2的內容</div>
        <div>3的內容</div>
        <div>4的內容</div>
    </div>
</div>

二、jquery.tabs.js

 1 (function($){
 2 
 3     $.fn.tabs = function(options) {
 4 
 5             var defaults = {
 6                 Event: 'click',
 7                 activeClass: 'active'
 8             }
 9             var options = $.extend(defaults, options);
10 
11             return $(this).each(function(){
12 
13                 var $thisTab = $(this).find('ul');
14                 var $tabCon = $thisTab.siblings('div');
15 
16                 $tabCon.find('div').each(function(){
17                     $(this).hide();
18                 });
19 
20                 $thisTab.find('li:first').addClass(options.activeClass);
21                 $tabCon.find('div:first').show();
22 
23                 $thisTab.find('li').each(function(index){
24 
25                     $(this).on(options.Event, function(){
26 
27                         $(this).siblings().removeClass(options.activeClass);
28                         $(this).addClass(options.activeClass);
29                         $tabCon.find('div').eq(index).show().siblings().hide();
30 
31                     });
32                     
33                 });
34             });
35         }
36     
37 })(jQuery)

三、調用

1 $('#tab').tabs({
2     activeClass: 'active'
3 });

 

小結：對jQuery插件的初識，感受應該還要繼續優化和擴展，繼續學習！

 

2016-10-14補充：

jquery.tabs.js優化

;(function($, window, document, undefined){

    // 定義TabFun的構造函數
    var TabFun = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            Event: 'click',
            activeClass: 'active'
        },
        this.options = $.extend({}, this.defaults, opt);
    }

    // 定義TabFun的方法
    TabFun.prototype = {
        // 選項卡切換
        tab: function() {
            
            var $this = this;
            return $this.$element.each(function(){

                        var $thisTab = $(this).find('ul');
                        var $tabCon = $thisTab.siblings('div');

                        $tabCon.find('div').each(function(){
                            $(this).hide();
                        });

                        $thisTab.find('li:first').addClass($this.options.activeClass);
                        $tabCon.find('div:first').show();

                        $thisTab.find('li').each(function(index){

                            $(this).on($this.options.Event, function(){

                                $(this).siblings().removeClass($this.options.activeClass);
                                $(this).addClass($this.options.activeClass);
                                $tabCon.find('div').eq(index).show().siblings().hide();

                            });
                            
                        });
                    });
        }
    }

    $.fn.tabs = function(options) {
        // 建立TabFun的實體
        var tabFun = new TabFun(this, options);
        // 調用其方法
        return tabFun.tab();
    }
    
})(jQuery, window, document)