学会自己写jQuery插件（二）---自己写的tab插件

浏览数：15 / 时间：2015年06月09日

通过上一个基础篇我们知道插件的格式，这次我来写一个tab插件

$(function() {
   $.fn.插件名称 = function(options) {
      var defaults = {
         Event : "click",        //触发响应事件
         msg : "Holle word!"        //显示内容
      };
      var options = $.extend(defaults,options);
      var $this = $(this);        //当然响应事件对象
      //功能代码部分
      //绑定事件
      $this.live(options.Event,function(e){
         alert(options.msg);
      });
   }
});

直接贴代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        *{margin:0;padding: 0;}
        li{list-style: none}
        .lee_ul{overflow: hidden;zoom:1;}
        .lee_ul1{overflow: hidden;zoom:1;}
        li{width: 100px;height: 30px;float: left;}
        li.active{background: red;}
        li.current{background: red;}
        .lee_main div{display: none;background: #ccc;width: 300px;}
        .lee_main .active{display: block;}
        .lee_main1 div{display: none;background: #ccc;width: 300px;}
        .lee_main1 .current{display: block;}
    </style>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        ;(function($){

            $.fn.lee_tab=function(options){
                var defaults={
                    //各种参数，各种熟悉
                    activeClass:‘active‘,
                    tabNav:‘.lee_ul>li‘,
                    tabCon:‘.lee_main>div‘,
                    eventType:‘click‘
                }

                var options=$.extend(defaults,options);

                this.each(function(){
                    //实现功能的代码
                    var _this=$(this);
                    _this.find(options.tabNav).on(options.eventType,function(){
                        $(this).addClass(options.activeClass).siblings().removeClass(options.activeClass);
                        var index=$(this).index();
                        _this.find(options.tabCon).eq(index).show().siblings().hide();
                    });

                });

                return this;
                alert(this);
            }

        })(jQuery);

        $(function(){
            $(‘.lee_tab‘).lee_tab();

            $(‘.lee_tab2‘).lee_tab({
                activeClass:‘current‘,
                tabNav:‘.lee_ul1>li‘,
                tabCon:‘.lee_main1>div‘,
                eventType:‘mouseover‘
            });
        })
    </script>
</head>
<body>
    <div class="lee_tab">
        <ul class="lee_ul">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="lee_main">
            <div class="active">11</div>
            <div>22</div>
            <div>33</div>
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="lee_tab2">
        <ul class="lee_ul1">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="lee_main1">
            <div class="current">11</div>
            <div>22</div>
            <div>33</div>
        </div>
    </div>
</body>
</html>