怎么用jq封装插件
Posted 梦幻飞雪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么用jq封装插件相关的知识,希望对你有一定的参考价值。
怎么用jq封装插件
以隔行变色为例
实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再移除
class就行;
2.不用class,直接改变background属性;
直接开干,这里用第二种方法。
第一步: 模板
jq有一个基本框架,直接搬过来呗
(function($){ $.fn.yourName = function(options){ //各种属性、参数 } var options = $.extend(defaults, options); return this.each(function(){ //插件实现代码 }); }; })(jQuery);
第二步: 套东西进去
1.命名
2.有哪些参数、属性,这里就是要结合功能来考虑了
evenColor (偶数行颜色) oddColor(奇数行颜色) activeColor(激活行颜色) changeFlag(是否开启隔行变色)oldColor (保存原来的颜色);
(function ($) { $.fn.tableUI = function ( options ) { var defaults = { evenColor: \'#dddddd\', //偶数行颜色 oddColor: \'#ffffff\', //奇数行颜色 activeColor: \'#09f\', //激活行颜色 changeFlag: true, //是否开启隔行变色 oldColor: \'\' //保存原来颜色 } var options = $.extend( defaults, options ); return this.each(function () { //功能代码 }) } })(jQuery);
此处重点:
var options = $.extend( defaults, options );
合并多个对象为一个,就是如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。
现在就是完善功能代码
(function ($) { $.fn.tableUI = function ( options ) { var defaults = { evenColor: \'#dddddd\', //偶数行颜色 oddColor: \'#ffffff\', //奇数行颜色 activeColor: \'#09f\', //激活行颜色 changeFlag: true, //是否开启隔行变色 oldColor: \'\' } var options = $.extend( defaults, options ); return this.each(function () { var thisTable = $(this); if ( options.changeFlag ) { //奇偶行颜色 $(thisTable).find(\'tr:even\').css( \'background\', options.evenColor ); $(thisTable).find(\'tr:odd\').css( \'background\', options.oddColor ); //激活行颜色 $(thisTable).find(\'tr\').bind(\'mouseover\', function () { //保存原来的颜色,以便于移出时恢复 options.oldColor = $(this).css(\'background\'); $(this).css( \'background\', options.activeColor ); }); $(thisTable).find(\'tr\').bind(\'mouseout\', function () { $(this).css( \'background\', options.oldColor ); }) } }) } })(jQuery);
到这里,就基本完成了,最后在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式……等等,因为只有这样才能显的这个插件够专业。
/* * tableUI 0.1 * Copyright (c) 梦幻飞雪 http://www.cnblogs.com/wangyihong/ * Date: 2017-06-28 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示 */ (function ($) { $.fn.tableUI = function ( options ) { var defaults = { evenColor: \'#dddddd\', //偶数行颜色 oddColor: \'#ffffff\', //奇数行颜色 activeColor: \'#09f\', //激活行颜色 changeFlag: true, //是否开启隔行变色 oldColor: \'\' } var options = $.extend( defaults, options ); return this.each(function () { var thisTable = $(this); if ( options.changeFlag ) { //奇偶行颜色 $(thisTable).find(\'tr:even\').css( \'background\', options.evenColor ); $(thisTable).find(\'tr:odd\').css( \'background\', options.oddColor ); //激活行颜色 $(thisTable).find(\'tr\').bind(\'mouseover\', function () { //保存原来的颜色,以便于移出时恢复 options.oldColor = $(this).css(\'background\'); $(this).css( \'background\', options.activeColor ); }); $(thisTable).find(\'tr\').bind(\'mouseout\', function () { $(this).css( \'background\', options.oldColor ); }) } }) } })(jQuery);
ok,大功告成,就差验证使用了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=\'./js/jquery.min.js\'></script> <script src=\'./js/tableUI.js\'></script> <style> *{ padding: 0; margin: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #table { width: 800px; margin: 50px auto; display: block; border-collapse:collapse; } #table tr { height: 50px; font-size: 20px; } #table tr td, #table tr th { border: 1px solid #666; width: 200px; text-align: center; } </style> </head> <body> <table id=\'table\' > <tr> <th>姓名</th> <th>年龄</th> <th>专业</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> <tr> <td>张三</td> <td>23</td> <td>计算机</td> <td>1</td> </tr> </table>
//插件使用 <script> $("#table").tableUI(); //默认的属性参数 </script> </body> </html>
设置新的属性参数
<script> $("#table").tableUI( options = { evenColor: \'blue\', //偶数行颜色 oddColor: \'green\', //奇数行颜色 activeColor: \'red\', //激活行颜色 changeFlag: true, //是否开启隔行变色 }); </script>
//此处options = 也可以不写
以上是关于怎么用jq封装插件的主要内容,如果未能解决你的问题,请参考以下文章