首页 > Web开发 > 详细

手写jQuery插件

时间:2019-02-22 18:11:07      阅读:154      评论:0      收藏:0      [点我收藏+]

模板

$.fn=jQuery.fn=jQuery.prototype 原型

(function($){
    //插件名 navStyle
    $.fn.navStyle=function(options){
        //各种属性、参数
        var defaults={
        }
        //如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。
        var options=$.extend(defaults,options);
        return this.each(function(){
                    //操作
                  })        
    }
})(jQuery);
                    

例:设置li的背景颜色、划动时显示的背景颜色以及点击时显示的背景颜色

(function($){
    //插件名 navStyle
    $.fn.navStyle=function(options){
        //各种属性、参数
        var defaults={
            bgClass:#ee2c2c,
            activeBgClass:"green",
            clickBgClass:"#cd22fe"
        }
        //如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。
        var options=$.extend(defaults,options);
        return this.each(function(){
            var thisNav=$(this);
            //添加背景颜色
            $(thisNav).find(li).css(background,options.bgClass);
            
            var li=$(thisNav).find(li);
            //添加滑过时颜色
            for(var i=0;i<li.length;i++){
                li.eq(i).bind(mouserover,function(){
                    $(this).css(background,options.activeBgClass);
                    $(this).siblings().css(background,options.bgClass);
                })
            }
            //添加点击时的颜色
            for(var i=0;i<li.length;i++){
                li.eq(i).bind(click,function(){
                    $(this).css(background,options.clickBgClass);
                    $(this).siblings().css(background,options.bgClass);
                })
            }
            
        })
    }
})(jQuery);

 html代码

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/NavUI.js"></script>
<script>    
    $(function(){
           $(ul).navStyle({bgClass:#0000FF,activeBgClass:"yellow"});
    })
</script>

 

手写jQuery插件

原文:https://www.cnblogs.com/xiaoan0705/p/10419644.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!