jquery插件（选项卡）

很早之想就学习jquery的插件写法，一直拖到现在，今天趁着没什么工作忙，搜索些资料学习下，写了个比较简单的选项卡效果。

刚开始有看到一个很通俗易通的例子：alert对话框。

jquery.alertMsg.js

/**
 * [description]
 * @param  {[type]} $ [description]
 * @return {[type]}   [description]
 */
(function($){

  $.fn.alertMsg = function(options) {

    var defaults = {
      mouseEvent: 'clcik',
      msg: 'hello world'
    }
    var options = $.extend(defaults, options);
    var $this = $(this);

    $this.on(options.mouseEvent, function(e){
      alert(options.msg);
    })
  }

})(jQuery)

调用方式：

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

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

jQuery插件结构

(function($){
    // tabs 自定义的插件名称
    $.fn.tabs = function(options) {

        // 设置默认参数
        var defaults = {
            activeClass: 'active'
            ... 
        }
        // 对象扩展
        var options = $.extend(defaults, options);

        return $(this).each(function(){
            // 编写相应实现代码
        })
    }

})(jQuery)

选项卡实现：

1、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>

2、jquery.tabs.js

(function($){

    $.fn.tabs = function(options) {

            var defaults = {
                Event: 'click',
                activeClass: 'active'
            }
            var options = $.extend(defaults, options);

            return $(this).each(function(){

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

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

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

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

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

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

                    });
                    
                });
            });
        }
    
})(jQuery)

3、调用

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

小结：对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)