封装jquery插件
最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装,
明白了如何封装插件,才能更好修改插件;
如何封装插件?
1、插件封装类型:
①封装对象类;②封装全局函数型;③选择器插件类;
2、关于封装插件的建议
①封装的插件建议为jquery.[插件名].js,避免和其他插件混淆;
②插件开头,尽量加上分号,避免别人的代码不规范引起错误,插件结尾都应该加上分号,避免压缩出错;
③插件应该设置默认参数,增加插件可用性;
例如
;(function($){ //此处编写插件代码 })(jQuery);
此处贴代码:
;(function($){ //1.初始化,拼接html //2.为元素添加事件 $.fn.extend({ 'pic':function(){ var $this=this; var vs=$(this).find("li").length; var html="<div class=\"box\"><ul>"; for (var i = 0; i < vs; i++) { if(i==0){ html+="<li class=\"active\"><a href=\"javascript:void(0);\" class=\"page\">"+(i*1+1)+"</a></li>"; }else{ html+="<li><a href=\"javascript:void(0);\" class=\"page\">"+(i*1+1)+"</a></li>"; } }; html+="</ul></div>"; $(this).parent().append(html); $(".box li").click(function(){ $(this).addClass("active"); $(this).siblings().removeClass("active"); $($this).find("li").eq($(this).text()*1-1).show(); $($this).find("li").eq($(this).text()*1-1).siblings().hide(); }); } }); })(jQuery);
此代码为一个简单的图片轮播插件,效果图如:
在此附上页面代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片显示</title> <link rel="stylesheet" type="text/css" href="jquery.pictrue.css"> </head> <body> <div class="container"> <ul class="picture" id="pc"> <li><img alt="1" src="imgs/03.jpg"></li> <li><img alt="1" src="imgs/04.jpg"></li> <li><img alt="1" src="imgs/05.jpg"></li> </ul> </div> </body> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.picture.js"></script> <script type="text/javascript"> $(function(){ $("#pc").pic(); }); </script> </html>