怎么用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=><title></title><script?src=></script><script?src=></script><style>*-sizing:?border--webkit-box-sizing:?border--moz-box-sizing:?border----</style></head><body><table?id=?><tr><th>姓名</th><th>年齡</th><th>專業</th><th>班級</th></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr><tr><td>張三</td><td></td><td>計算機</td><td></td></tr></table>//插件使用<script></script></body> </html>
設置新的屬性參數
????????<script>=,?oddColor:?,??activeColor:?,?changeFlag:?,?????</script>//此處options?=?也可以不寫
轉載于:https://blog.51cto.com/13064681/1942701
總結
- 上一篇： 脚本 sh 和 ./ 的区别,exec和
- 下一篇： 简单的bean分页输出