Jquery 插件-1 tableUI

table,行列交换颜色，Mouseover,mouseout,不同颜色，

直接看插件。

详细看下面这个链接：

http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html

http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html

 

/*
* TableUI 0.1
* copyright (c) 2014
* Date: 2014-03-11
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*/

//这种是闭包的写法
(function ($) {
    $.fn.TableUI = function (options) {
        //各种属性，参数
        var defaults = {
            evenRowCass: "evenRow",  //这里是css属性
            oddRowClass: "oddRow",
            activeRowClass: "activeRow"
        }

        /*

        .evenRow{background-color:#f0f0f0;}
         .activeRow{background-color:#FFFF55;}
        
        */
        //属性合并
        //其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数
        var options = $.extend(defaults, options);
        this.each(function () {
            //插件实现代码
            var thisTable = $(this);
            //添加奇偶行颜色
            $(thisTable).find("tr:even").addClass(options.evenRowCass);
            $(thisTable).find("tr:odd").addClass(options.oddRowClass);
            //添加活动行颜色
            $(thisTable).find("tr").bind("mouseover", function () {
                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout", function () {
                $(this).removeClass(options.activeRowClass);
            });
        });
    };
})(jQuery);

/*

也许有些朋友觉得这样就算是完成了。但是切切相反，我们还有最重要的一步没有完成，
那就是一定要在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式、
出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
*/

 

 

界面调用

 

    <script src="Scripts/TableUI.js" type="text/javascript"></script>
    <script>
        $().ready(function () {
            $(".table_solid").TableUI();
        })

 

    <table class="table_solid">

这里是用的table的css属性。

 

在repeater绑定控件同样可以使用。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewColor.aspx.cs" Inherits="GridviewColor" %>

<!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 runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/TableUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".table_solid").TableUI({ evenRowCass: "eventRow", oddRowClass: "oddRowClass", activeRowClass: "activeRow" }); //$(".bgRed") 选择所用CSS类为bgRed的元素
        })
    </script>
    <style type="text/css">
        body
        {
            font-family: 'Verdana' , '宋体';
            font-size: 12px;
        }
        .eventRow
        {
            background-color: #f0f0ff;
        }
        .activeRow
        {
            background-color: #FFFF55;
        }
        .oddRowClass
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="table_solid">
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            password
                        </td>
                    </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <%#Eval("name")%>
                        </td>
                        <td>
                            <%#Eval("password")%>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
    </div>
    </form>
</body>
</html>

 

posted @ 2014-03-11 11:03  chengdu.jack.li  阅读(628)  评论(0)    收藏  举报