在jQuery官网中提供了如下的插件编写标准:
;(function($){ $.fn.plugin(插件名,被调用时使用) = function(options){ var defaults = { //各种属性、各种方法 } var options = $.extend(defaults , options); this.each(function(){ //要实现的功能或方法 }); return this ; } })(jQuery); |
案例一:隔行变色
要求:编写一个插件使得表格的偶数行显示红色,奇数行显示黄色,另外当鼠标移进去的时候当前行显示绿色,移出的时候又显示回原来的颜色。
1)首先创建一个jquery-changeColor.js文件用于编写改变表格奇偶数行的颜色,及其他功能的插件,具体实现代码如下:
// JavaScript Document ;(function($){ $.fn.changeColor = function(options){ var defaults = { //各种属性 eventRowClass:'eventRow', oddRowClass:'oddRow', currentClass:'currentRow' } var options = $.extend(defaults,options); this.each(function(){ //偶数行 $(this).find('tr:even').addClass(options.eventRowClass); //奇数行 $(this).find('tr:odd').addClass(options.oddRowClass); //当前行 $(this).find("tr").mouseover(function(){ $(this).addClass(options.currentClass); }) $(this).find('tr').mouseout(function(){ $(this).removeClass(options.currentClass); }); }); return this ; } })(jQuery); |
2)创建一个用于显示表格的table.html文件,代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery插件编写</title> <style> table{ width:100%;border:1px solid black;} th,tr,td{ text-align:center;} .eventRow{ background-color:red;} .oddRow{ background-color:yellow;} .currentRow{ background-color:green;} </style> <script src="jquery1.8.2.js"></script> <script src="jquery-changeColor.js"></script> <script language="javascript"> $(function(){ $("#table1").changeColor(); }) </script> </head> <body> <table id="table1"> //此外省略表格行代码 </table> </body> </html>
|
但是在实际开发中如果要绑定事件的话,一般都不会直接使用类似“mouseover()”或者“mouseout()”等函数,而是采用更加灵活的“bind()”函数进行绑定。
将上例中的jquery-changeColor.js中的绑定事件的代码修改为如下:
// JavaScript Document ;(function($){ $.fn.changeColor = function(options){//changeColor为被调用的函数名, var defaults = { //各种属性 eventRowClass:'eventRow', oddRowClass:'oddRow', currentClass:'currentRow', encType1:'mouseover', encType2:'mouseout' } var options = $.extend(defaults,options); //此语句是将defaults封装进options里 this.each(function(){ //偶数行 $(this).find('tr:even').addClass(options.eventRowClass); //奇数行 $(this).find('tr:odd').addClass(options.oddRowClass); //当前行 $(this).find('tr').bind(options.encType1,function(){ $(this).addClass(options.currentClass); }); $(this).find('tr').bind(options.encType2,function(){ $(this).removeClass(options.currentClass); }); }); return this; } })(jQuery); |
这样的话,如果当下次想要点击的时候,将当前行的颜色变为绿色的话,只需要在table.html中修改如下代码即可:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery插件编写</title> <style> table{ width:100%;border:1px solid black;} th,tr,td{ text-align:center;} .eventRow{ background-color:red;} .oddRow{ background-color:yellow;} .currentRow{ background-color:green;} </style> <script src="jquery1.8.2.js"></script> <script src="jquery-changeColor.js"></script> <script language="javascript"> $(function(){ $("#table1").changeColor({ encType1:'click' }); }) </script> </head> <body> <table id="table1"> //此外省略表格行代码 </table> </body> </html>
|
案例二:tab标签
1)首先创建一个用于显示tab标签功能的jquery-tab.js页面,具体代码如下:
// JavaScript Document ;(function($){ $.fn.tab = function(options){ var defaults = { currentClass:'current', tabLi:'.tab>li', divContent:'#divContent>div', eventType:'click' } var options = $.extend(defaults,options); this.each(function(){ var _this = $(this); _this.find(options.tabLi).bind(options.eventType,function(){ $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass); var index = $(this).index(); _this.find(options.divContent).eq(index).show().siblings().hide(); }); }); return this; } })(jQuery); |
2)创建一个用于显示tab标签的tab.html页面,具体实现代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0; padding:0;} body{ margin:50px;} .tab{ list-style:none;} .tab li{ float:left; width:150px; height:26px; line-height:26px; text-align:center; margin-left:3px; border-bottom:none; border:1px solid blue;} .tab li.current{ background-color:blue; font-weight:bold; cursor:pointer;} #divContent{ clear:both;} #divContent div{ width:500px; display:none; height:200px; border:1px solid blue;} </style> <script src="jquery1.8.2.js"></script> <script src="jquery-tab.js"></script> <script> $(function(){ $('#div').tab(); }); </script> </head> <body> <div id="div"> <ul class="tab"> <li class="current">html</li> <li>css</li> <li>javascript</li> </ul> <div id="divContent"> <div style="display:block">html</div> <div>css</div> <div>javascript</div> </div> </div> </body> </html>
|