码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 特效

时间:2015-12-24 00:19:30      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

 

 

//按钮倒计时 <script src="../Script/jquery-1.9.1.js"></script> <script language="javascript"> $(document).ready(function () { //$("#Button1").attr("disabled","disabled").attr("value","ClickMe").attr("type","radio"); //var s = $("#Button1").attr("type"); //alert(s); //$("#Button1").removeAttr("disabled"); showTime(); }); var n = 10; //实现按钮倒计时 function showTime() { n--; if (n == 0) {//将 value的值换成“同意”,将 button 的disabled属性 移出 直到 n==0时停止 $("#Button1").attr("value","同意").removeAttr("disabled"); } else { $("#Button1").attr("value", "同意(" + n + ")"); window.setTimeout("showTime()", 1000); } } </script>

技术分享

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">

        .white {
            background-color:white;
        }
        .pink {
            background-color:#FFFFcc;
        }
        .m_over {
            background-color:yellow;
            font-weight:bold;
        }
    </style>
    <script src="../Script/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            //$("#GridView1 tr:first").css("background-color", "navy").css("color", "white");
            //$("#GridView1 tr:gt(0):odd").css("background-color", "#ffffcc");

            //通过css()方法来操作内联样式
            //var bg = "";
            //$("#GridView1 tr:gt(0)").mouseover(function () {
            //    bg = $(this).css("background-color");
            //    $(this).css("background-color", "yellow");
            //}).mouseout(function () {
            //    $(this).css("background-color", bg);
            //});

            //通过操作class来实现光棒效果
            $("#GridView1 tr:gt(0)").mouseover(function () {
                $(this).addClass("m_over");
            }).mouseout(function () {
                $(this).removeClass("m_over");
            });


        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Code" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。" Width="100%">
            <AlternatingRowStyle CssClass="pink" />
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="Code" ReadOnly="True" SortExpression="Code" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Image1" HeaderText="Image1" SortExpression="Image1" />
                <asp:BoundField DataField="Image2" HeaderText="Image2" SortExpression="Image2" />
                <asp:BoundField DataField="Parent" HeaderText="Parent" SortExpression="Parent" />
            </Columns>
            <HeaderStyle BackColor="Navy" ForeColor="White" />
            <RowStyle CssClass="white" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>" DeleteCommand="DELETE FROM [Menu] WHERE [Code] = @Code" InsertCommand="INSERT INTO [Menu] ([Code], [Name], [Image1], [Image2], [Parent]) VALUES (@Code, @Name, @Image1, @Image2, @Parent)" ProviderName="<%$ ConnectionStrings:mydbConnectionString.ProviderName %>" SelectCommand="SELECT [Code], [Name], [Image1], [Image2], [Parent] FROM [Menu]" UpdateCommand="UPDATE [Menu] SET [Name] = @Name, [Image1] = @Image1, [Image2] = @Image2, [Parent] = @Parent WHERE [Code] = @Code">
            <DeleteParameters>
                <asp:Parameter Name="Code" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Code" Type="String" />
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="Image1" Type="String" />
                <asp:Parameter Name="Image2" Type="String" />
                <asp:Parameter Name="Parent" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="Image1" Type="String" />
                <asp:Parameter Name="Image2" Type="String" />
                <asp:Parameter Name="Parent" Type="String" />
                <asp:Parameter Name="Code" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
</body>
</html>

 技术分享

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #main {
            width:200px;
            border:1px solid black;
        }
        .title {
            background-color:navy;
            padding:5px;
            color:white;
            font-weight:bold;
            text-align:center;
            margin-top:1px;
        }
        .content {
            background-color:#ffffcc;
            height:300px;
            display:none;
        }
    </style>
    <script src="../Script/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".title").click(function () {
                if ($(this).next().css("display") != "block") {
                    $(".content").css("display", "none");
                    $(this).next().css("display", "block");
                } else {
                    $(this).next().css("display", "none");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
        <div class="title">我的好友</div>
        <div class="content"></div>
        <div class="title">陌生人</div>
        <div class="content"></div>
        <div class="title">黑名单</div>
        <div class="content"></div>

    </div>
    </form>
</body>
</html>

 技术分享

//文本框不能为空提示
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Script/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            //var s = $("#ss").html();
            //alert(s);
            //$("#ss").text("我不是猪");
            $("#TextBox1").focus(function () {
                var s = $(this).val();
                if (s == "不能为空") {
                    $(this).val("");
                    $(this).css("color", "black");
                }
            }).blur(function () {
                var s = $(this).val();
                if (s.length == 0) {
                    $(this).val("不能为空");
                    $(this).css("color", "#a0a0a0");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <span id="ss">猪头可爱</span>

        <asp:TextBox ID="TextBox1" runat="server" style="color:#a0a0a0" Text="不能为空"></asp:TextBox>
    </div>
    </form>
</body>
</html>

 技术分享

//文本输入框
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Script/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () { 
            $("#TextBox1").keyup(function () {
                var s = $(this).val();
                var l = 140 - s.length;

                $("#Label1").html(l);
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" Height="152px" TextMode="MultiLine" Width="338px"></asp:TextBox>
        <br />
        还可以输入<asp:Label ID="Label1" runat="server"></asp:Label>
        字</div>
    </form>
</body>
</html>

 技术分享

 

JQuery 特效

标签:

原文地址:http://www.cnblogs.com/hanke123/p/5071646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!