学会自己写jQuery插件

第一步:定义插件

 

$(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);

      });

   }

});

 

 第二步:调用插件

 

$(function() {

   //绑定元素事件

   $("#test").插件名称({

      Event : "click",        //触发响应事件

      msg : "插件原来就是这么简单!"     //显示内容

   });

});

 

<input type="button" id="test" value="这是一个简单的插件调用" />

通过上一个基础篇我们知道插件的格式,这次我来写一个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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。