zoukankan      html  css  js  c++  java
  • 学会自己写jQuery插件(二)---自己写的tab插件

    通过上一个基础篇我们知道插件的格式,这次我来写一个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>
  • 相关阅读:
    Construct Binary Tree from Preorder and Inorder Traversal
    Construct Binary Tree from Inorder and Postorder Traversal
    Maximum Depth of Binary Tree
    Sharepoint 2013 创建TimeJob 自动发送邮件
    IE8 不能够在Sharepoint平台上在线打开Office文档解决方案
    TFS安装与管理
    局域网通过IP查看对方计算机名,通过计算机名查看对方IP以及查看在线所有电脑IP
    JS 隐藏Sharepoint中List Item View页面的某一个字段
    SharePoint Calculated Column Formulas & Functions
    JS 两个一组数组转二维数组
  • 原文地址:https://www.cnblogs.com/leejersey/p/3604999.html
Copyright © 2011-2022 走看看