将JavaScript与ASP.NET 2.0配合使用-技术开发专区

将JavaScript与ASP.NET 2.0配合使用

作者：Bill Evjen 编辑：赵雷 2006-06-16 10:50

执行简单的按钮翻转

一谈到 Web 页面上的按钮，Web 开发人员想要为按钮赋予的较为常见的功能就是翻转效果。翻转效果就是当终端用户将其鼠标置于 Web 页面的某个按钮上时（并不单击该按钮），该按钮的颜色和形状将发生改变。对于具有多个按钮的 Web 页面而言，该功能尤为有用，从使用角度而言这是很有用的，会在终端用户单击按钮之前通知其要对该按钮执行单击操作了。

在服务器控件出现之前，该操作很容易实现，现在，尽管有了服务器控件，也不是那么困难。执行类似操作的代码如下：

Visual Basic

<%@ Page Language="VB" %>

<script runat="server">
    Protected Sub ImageButton1_Click()Sub ImageButton1_Click(ByVal sender As Object, _
      ByVal e As System.Web.UI.ImageClickEventArgs)
        Label1.Text = "回发！"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>
       <asp:ImageButton id="ImageButton1"
        onmouseover="this.src='button2.gif'"
        onclick="ImageButton1_Click"
        onmouseout="this.src='button1.gif'" runat="server"
        ImageUrl="button1.gif"></asp:ImageButton>
    </p>
    <p>
       <asp:Label id="Label1" runat="server" />
    </p>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<script runat="server">
 protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
 ...{
      Label1.Text = "回发！";
 }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>
       <asp:ImageButton id="ImageButton1"
        onmouseover="this.src='button2.gif'"
        onclick="ImageButton1_Click"
        onmouseout="this.src='button1.gif'" runat="server"
        ImageUrl="button1.gif"></asp:ImageButton>
    </p>
    <p>
       <asp:Label id="Label1" runat="server" />
    </p>
    </div>
    </form>
</body>
</html>

这次我们不通过 <body> 元素将 JavaScript 指定给服务器控件，而是使用控件的 onmouseover 和 onmouseout 事件。对于每个事件，我们均指定一个 JavaScript 值。onmouseover 事件表示终端用户将其鼠标置于控件上方的操作，而 onmouseout 表示终端用户将其鼠标从控件上方移开的操作。在本例中，我们希望当鼠标置于按钮上方时会显示一张图像，而在当加载页面后与当将鼠标从按钮移开后会显示原始图像。

如果您正在直接使用该类控件，而不是像我们在 <body> 元素中使用 JavaScript 时那样在 form 中指定控件，您可以使用 this 关键字，其后紧跟您试图更改的属性。

第1页：将 JavaScript 添加到服务器控件第2页：执行简单的按钮翻转第3页：设置控件焦点第4页：使用较大的 JavaScript 函数第5页：结论及作者

关注我们