经常使用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>