//按钮倒计时 <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 { 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>