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)

 

选项卡实现：

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

 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)

3、调用

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)

 

posted @ 2016-10-09 17:59  有点锋芒YA  阅读(549)  评论(0)  编辑  收藏  举报