当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

ASP.NET的Panel控件

  ASP.NET的Panel控件,通过名字我们可以看出这是一个菜单控件,当鼠标移动到指定的位置时,在不影响其他的元素的情况下出现一个菜单,并允许用户进行一些操作。

  重要属性

  TargetControlID:要显示菜单的目标控件的ID

  PopupControlID:作为弹出菜单的控件的ID

  HoverCssClass:鼠标移动到目标控件时目标控件的样式

  PopupPosition:弹出菜单所在的位置,共有五个值(bottom,top,left,right,center)

  OffsetX:菜单距离目标控件的位置--横坐标

  OffsetY:菜单距离目标控件的位置--纵坐标

  1 打开vs2005,创建一个AjaxControlToolKit网站,命名为oec2003_HoverMenu

  2 打开默认Default.aspx页,切换到设计视图

  3 在页面中添加一个TextBox和一个Panel控件,并在Panel控件中添加三个LinkButton控件,如下

  PopDelay:弹出菜单的延迟时间

  <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

  <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">日期</asp:LinkButton> <br />

  <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click">时间</asp:LinkButton><br />

  <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">姓名</asp:LinkButton>

  </asp:Panel>

  4 在页面中添加HoverMenu控件,并设置其属性,代码如下

  <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="TextBox1" OffsetX="-1" OffsetY="-1" HoverCssClass="hover" PopupControlID="Panel1" PopupPosition="bottom">

  </ajaxToolkit:HoverMenuExtender>

  5 切换到代码视图,在head元素间添加css样式,用来实现鼠标移动到目标控件时的样式,

  如下

  <style type="text/css"> .hover

  {}{

  background-color:blue;

  background-repeat:repeat-x;

  background-position:left top;

  }

  </style> 前面在Panel中放置了三个LinkButton控件,点击了LinkButton控件后会在文本框中出现相应的内容,LinkButton的单击事件代码如下

  protected void LinkButton1_Click(object sender, EventArgs e)

  {

  TextBox1.Text = DateTime.Now.ToShortDateString();

  }

  protected void LinkButton3_Click(object sender, EventArgs e)

  {

  TextBox1.Text = DateTime.Now.TimeOfDay.ToString();

  }

  protected void LinkButton2_Click(object sender, EventArgs e)

  {

  TextBox1.Text = "oec2003";

  }

  保存设计,运行程序,将鼠标移动文本框上时,会发现,文本框的样式变成了我们自定义的样式了,而且还会弹出一个菜单,就是Panel控件

  点击菜单中的按钮在文本框中就会出现相应的内容 ,以上介绍ASP.NET的Panel控件。

相关内容
赞助商链接