自定义jQuery插件

来源：互联网发布：淘宝的信誉评级怎么看编辑：程序博客网时间：2024/05/01 13:24

最近到网上看了一个自定义jQuery插件的例子，自己试了一下。

原文地址：点击打开链接

1.首先定义js文件

/* * tableUI 0.1 * Copyright (c) 2011 sugang * Date: 2011-07-14 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */(function($){    $.fn.tableUI = function(options){        var defaults = {            evenRowClass:"evenRow",            oddRowClass:"oddRow",            activeRowClass:"activeRow"                    }        var options = $.extend(defaults, options);        this.each(function(){var thisTable=$(this);//添加奇偶行颜色thisTable.find("tr:even").addClass(options.evenRowClass);thisTable.find("tr:odd").addClass(options.oddRowClass);//添加活动行颜色(下面注释内容作用和本段相同，但还是有区别的，大家可以百度一下)thisTable.find("tr").bind("mouseover mouseout",function(){$(this).toggleClass(options.activeRowClass);});/*$(thisTable).find("tr").bind("mouseenter mouseleave",function(e){$(this).toggleClass(options.activeRowClass);});*/        });    };})(jQuery);

2.使用方法

引入jQuery文件和js文件，要注意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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.4.4.min.js"></script><script type="text/javascript" src="tableUI.js"></script><script>$(document).ready(function (){$('#tbl, #tbl2').tableUI();});</script><style>.evenRow{background-color:#FFCCCC;}.oddRow{background-color:#CCCCCC;}.activeRow{background-color:#CCCCFF;}</style></head><body><table id="tbl" style="width:400px;" border="5px"><tr>    <td><span style="border:1px solid red; display:block;">1111111111111</span></td>        <td>1111111111111</td>    </tr>    <tr>    <td>1111111111111</td>        <td>1111111111111</td>    </tr>    <tr>    <td>1111111111111</td>        <td>1111111111111</td>    </tr>    <tr>    <td>1111111111111</td>        <td>1111111111111</td>    </tr></table></body></html>