代码改变世界

JQuery插件开发简单实例

2015-10-12 11:49  slmk  阅读(477)  评论(0)  编辑  收藏  举报

经常使用Jquery的各种插件，却对如何开发插件一无所知，以为是一件很麻烦的事儿？其实不然，下面通过一个简单的实例，来看一下Jquery Plugin的开发。

先看DEMO：动画菜单

不用插件如何实现以上效果：

$(document).ready(function() {
    
    $('ul#menu li:even').addClass('even');
        
    $('ul#menu li a').mouseover(function() {
        
        $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });
        
    }).mouseout(function() {
    
        $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
        
    }).click(function() {
    
        $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
    });
            
});

我们希望封装成插件：

$(document).ready(function() {
    
    $(#menu).animateMenu({
        padding:20
    })
            
});

JQuery插件结构

(function($){
    //定义JQuery插件
     $.fn.extend({ 
         
         //插件名称
         pluginname: function() {
            //对选择出的每个Jquery对象执行操作
            return this.each(function() {
            
                //插件代码
            
            });
        }
    });
    
})(jQuery);

带有选项的插件结构

(function($){
     $.fn.extend({ 
         
        //传递选项
         pluginname: function(options) {
            //默认选项
            var defaults = {
                padding: 20,
                mouseOverColor : '#000000',
                mouseOutColor : '#ffffff'
            }
                
            var options =  $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                
                //插件代码
                //访问选项值
                alert(o.padding);
            
            });
        }
    });
    
})(jQuery);

动画菜单插件代码

(function($){
    $.fn.extend({ 
        //插件名 - animatemenu
        animateMenu: function(options) {
            //默认设置
            var defaults = {
                animatePadding: 60,
                defaultPadding: 10,
                evenColor: '#ccc',
                oddColor: '#eee'
            };
            
            var options = $.extend(defaults, options);
        
            return this.each(function() {
                var o =options;
                
                //当前菜单
                var obj = $(this);                
                
                //所有菜单项
                var items = $("li", obj);
                  
                //设置背景色
                $("li:even", obj).css('background-color', o.evenColor);                
                $("li:odd", obj).css('background-color', o.oddColor);                      
                  
                //添加鼠标事件
                items.mouseover(function() {
                    $(this).animate({paddingLeft: o.animatePadding}, 300);
                    
                }).mouseout(function() {
                    $(this).animate({paddingLeft: o.defaultPadding}, 300);
                });
                
            });
        }
    });
})(jQuery);

全部测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
(function($){
     $.fn.extend({ 
         animateMenu: function(options) {
            var defaults = {
                animatePadding: 60,
                   defaultPadding: 10,
                   evenColor: '#ccc',
                   oddColor: '#eee',
            };
            
            var options = $.extend(defaults, options);
        
            return this.each(function() {
                  var o =options;
                  var obj = $(this);                
                  var items = $("li", obj);
                  
                  $("li:even", obj).css('background-color', o.evenColor);                
                  $("li:odd", obj).css('background-color', o.oddColor);                      
                  
                  items.mouseover(function() {
                      $(this).animate({paddingLeft: o.animatePadding}, 300);
                    
                  }).mouseout(function() {
                      $(this).animate({paddingLeft: o.defaultPadding}, 300);
                    
                  });
            });
        }
    });
})(jQuery);
    
    </script>
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
    });    
    </script>
    <style>
      body {font-family:arial;font-style:bold}
      a {color:#666; text-decoration:none}
        #menu {list-style:none;width:160px;padding-left:10px;}
        #menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}
    </style>
</head>   
<body>
<ul id="menu">
    <li>Home</li>
    <li>Posts</li>
    <li>About</li>
    <li>Contact</li>
</ul>
</body>
</html>