简介
通过名字我们可以看出这是一个菜单控件,当鼠标移动到指定的位置时,在不影响其他的元素的情况下出现一个菜单,并允许用户进行一些操作。
重要属性
TargetControlID:要显示菜单的目标控件的ID
PopupControlID:作为弹出菜单的控件的ID
HoverCssClass:鼠标移动到目标控件时目标控件的样式
PopupPosition:弹出菜单所在的位置,共有五个值(bottom,top,left,right,center)
OffsetX:菜单距离目标控件的位置--横坐标
OffsetY:菜单距离目标控件的位置--纵坐标
PopDelay:弹出菜单的延迟时间
示例1
1 打开vs2005,创建一个AjaxControlToolKit网站,命名为oec2003_HoverMenu
2 打开默认Default.aspx页,切换到设计视图
3 在页面中添加一个TextBox和一个Panel控件,并在Panel控件中添加三个LinkButton控件,如下
<
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
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
}
{
background-color:blue;
background-repeat:repeat-x;
background-position:left top;
}
</style>
6 前面在Panel中放置了三个LinkButton控件,点击了LinkButton控件后会在文本框中出现相应的内容,LinkButton的单击事件代码如下
protected
void
LinkButton1_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
TextBox1.Text = DateTime.Now.ToShortDateString();
}
protected
void
LinkButton3_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
TextBox1.Text = DateTime.Now.TimeOfDay.ToString();
}
protected
void
LinkButton2_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
TextBox1.Text = "oec2003";
}
7 保存设计,运行程序,将鼠标移动文本框上时,会发现,文本框的样式变成了我们自定义的样式了,而且还会弹出一个菜单,就是Panel控件
点击菜单中的按钮在文本框中就会出现相应的内容
示例2
上面做了一个HoverMenu控件的简单应用,其实HoverMenu控件也可以用于GridView 控件中来替换编辑功能,让编辑列可以出现在我们自定义的菜单中,下面就来看看是怎么实现的吧
1 在网站中新建一个web 页,命名为oec2003_GridViewHoverMenu.aspx
2 切换到设计视图,在页面中添加ScriptManager和UpdatePanel控件
3 在UpdatePanel控件中添加GridView和SqlDataSource控件,并配置数据源,如下
<
asp:SqlDataSource
ID
="SqlDataSource1"
runat
="server"
ConflictDetection
="CompareAllValues"
ConnectionString
="<%$ ConnectionStrings:studentConnectionString %>"
DeleteCommand
="DELETE FROM [studentInfo] WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName"
InsertCommand
="INSERT INTO [studentInfo] ([stuID], [stuName]) VALUES (@stuID, @stuName)"
OldValuesParameterFormatString
="original_{0}"
SelectCommand
="SELECT * FROM [studentInfo]"
UpdateCommand
="UPDATE [studentInfo] SET [stuName] = @stuName WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName"
>
<
DeleteParameters
>
<
asp:Parameter
Name
="original_stuID"
Type
="String"
/>
<
asp:Parameter
Name
="original_stuName"
Type
="String"
/>
</
DeleteParameters
>
<
UpdateParameters
>
<
asp:Parameter
Name
="stuName"
Type
="String"
/>
<
asp:Parameter
Name
="original_stuID"
Type
="String"
/>
<
asp:Parameter
Name
="original_stuName"
Type
="String"
/>
</
UpdateParameters
>
<
InsertParameters
>
<
asp:Parameter
Name
="stuID"
Type
="String"
/>
<
asp:Parameter
Name
="stuName"
Type
="String"
/>
</
InsertParameters
>
</
asp:SqlDataSource
>
4 打开GridView控件的编辑列窗口,将stuName 字段设置成模板列
5 我们要在GridView控件中实现两个菜单,一个是在普通模式下的“编辑”和“删除”,一个是在编辑状态下的“更新”和“取消”
6 编辑模板列,会发现在窗口中有ItemTemplate和EditItemTemplate两项,分别在这两项下添加HoverMenu和Panl控件,每个Panel控件中放置两个LinkButton控件,属性设置如下
<
EditItemTemplate
>
<
asp:TextBox
ID
="TextBox1"
runat
="server"
Text
='<%#
Bind("stuName") %
>
'>
</
asp:TextBox
>
<
ajaxToolkit:HoverMenuExtender
ID
="HoverMenuExtender2"
runat
="server"
TargetControlID
="TextBox1"
PopupControlID
="Panel2"
OffsetX
="10"
OffsetY
="-1"
PopupPosition
="right"
>
</
ajaxToolkit:HoverMenuExtender
>
<
asp:Panel
ID
="Panel2"
runat
="server"
Height
="50px"
Width
="125px"
>
<
asp:LinkButton
ID
="LinkButton3"
runat
="server"
CommandArgument
="Update"
CommandName
="Update"
>
更新
</
asp:LinkButton
>
<
asp:LinkButton
ID
="LinkButton4"
runat
="server"
CommandArgument
="Cacel"
CommandName
="Cancel"
>
取消
</
asp:LinkButton
></
asp:Panel
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
="Label1"
runat
="server"
Text
='<%#
Bind("stuName") %
>
'>
</
asp:Label
>
<
ajaxToolkit:HoverMenuExtender
ID
="HoverMenuExtender1"
runat
="server"
TargetControlID
="Label1"
PopupControlID
="Panel1"
OffsetX
="10"
OffsetY
="-1"
PopupPosition
="right"
>
</
ajaxToolkit:HoverMenuExtender
>
<
asp:Panel
ID
="Panel1"
runat
="server"
Height
="50px"
Width
="125px"
>
<
asp:LinkButton
ID
="LinkButton1"
runat
="server"
CommandArgument
="Edit"
CommandName
="Edit"
>
编辑
</
asp:LinkButton
>
<
asp:LinkButton
ID
="LinkButton2"
runat
="server"
CommandArgument
="Delete"
CommandName
="Delete"
>
删除
</
asp:LinkButton
></
asp:Panel
>
</
ItemTemplate
>
在这儿要注意,因为LinkButton要实现对GridView的数据行的编辑功能,所以LinkButton的CommandArgument和CommandName属性要设置成对应的GridView 的方法的名字,如编辑功能对应的CommandName应该设置成Edit.
7 保存设计,运行程序,当鼠标移动到stuName列的数据行上时,就会出现自定义的菜单,可以实现编辑功能。功能和在GridView中启用编辑的功能一样
通过名字我们可以看出这是一个菜单控件,当鼠标移动到指定的位置时,在不影响其他的元素的情况下出现一个菜单,并允许用户进行一些操作。
重要属性
TargetControlID:要显示菜单的目标控件的ID
PopupControlID:作为弹出菜单的控件的ID
HoverCssClass:鼠标移动到目标控件时目标控件的样式
PopupPosition:弹出菜单所在的位置,共有五个值(bottom,top,left,right,center)
OffsetX:菜单距离目标控件的位置--横坐标
OffsetY:菜单距离目标控件的位置--纵坐标
PopDelay:弹出菜单的延迟时间
示例1
1 打开vs2005,创建一个AjaxControlToolKit网站,命名为oec2003_HoverMenu
2 打开默认Default.aspx页,切换到设计视图
3 在页面中添加一个TextBox和一个Panel控件,并在Panel控件中添加三个LinkButton控件,如下
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
点击菜单中的按钮在文本框中就会出现相应的内容
示例2
上面做了一个HoverMenu控件的简单应用,其实HoverMenu控件也可以用于GridView 控件中来替换编辑功能,让编辑列可以出现在我们自定义的菜单中,下面就来看看是怎么实现的吧
1 在网站中新建一个web 页,命名为oec2003_GridViewHoverMenu.aspx
2 切换到设计视图,在页面中添加ScriptManager和UpdatePanel控件
3 在UpdatePanel控件中添加GridView和SqlDataSource控件,并配置数据源,如下
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5 我们要在GridView控件中实现两个菜单,一个是在普通模式下的“编辑”和“删除”,一个是在编辑状态下的“更新”和“取消”
6 编辑模板列,会发现在窗口中有ItemTemplate和EditItemTemplate两项,分别在这两项下添加HoverMenu和Panl控件,每个Panel控件中放置两个LinkButton控件,属性设置如下
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7 保存设计,运行程序,当鼠标移动到stuName列的数据行上时,就会出现自定义的菜单,可以实现编辑功能。功能和在GridView中启用编辑的功能一样