altas(ajax)控件(十三):悬浮菜单HoverMenu
2007-09-21 19:46
302 查看
HoverMenu 可以附加到任何一个ASP.NET WebControl 上,它结合一个Panel产生悬浮效果。
下面一个例子, ASP.NET GridView从数据库里查询并显示数据。当鼠标移动到GridView上时,每一行都会出现悬浮菜单HoverMenu,我们可以通过菜单中的命令操作数据。
例子:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"
ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<div style="border:1px outset white;padding:2px;">
<div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div>
<div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div>
</div>
</asp:Panel>
<asp:Panel ID="Panel9" runat="server">
<table width="100%">
<tr>
<td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server"
Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>
<td width="50%"><asp:Label ID="Label2" runat="server"
Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>' /></td>
<td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>' /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
TargetControlID="Panel9"
PopDelay="25" />
</ItemTemplate>
<EditItemTemplate>
<asp:Panel ID="Panel9" runat="server" Width="80%">
<table width="100%">
<tr>
<td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"
Text='<%# Bind("Title") %>' Width="100" /></td>
<td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"
Text='<%# Bind("Description") %>' Width="150" /></td>
<td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"
Text='<%# Bind("Priority") %>' Width="40" /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"
TargetControlID="Panel9"
PopupControlID="PopupMenu"
HoverCssClass="popupHover"
PopupPosition="Right" />
<asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">
<div style="border:1px outset white">
<asp:LinkButton ID="LinkButton1" runat="server"
CausesValidation="True" CommandName="Update" Text="Update" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</div>
</asp:Panel>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
效果:http://asp.net/AJAX/Control-Toolkit/Live/HoverMenu/HoverMenu.aspx
下面一个例子, ASP.NET GridView从数据库里查询并显示数据。当鼠标移动到GridView上时,每一行都会出现悬浮菜单HoverMenu,我们可以通过菜单中的命令操作数据。
例子:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"
ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<div style="border:1px outset white;padding:2px;">
<div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div>
<div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div>
</div>
</asp:Panel>
<asp:Panel ID="Panel9" runat="server">
<table width="100%">
<tr>
<td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server"
Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>
<td width="50%"><asp:Label ID="Label2" runat="server"
Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>' /></td>
<td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>' /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
TargetControlID="Panel9"
PopDelay="25" />
</ItemTemplate>
<EditItemTemplate>
<asp:Panel ID="Panel9" runat="server" Width="80%">
<table width="100%">
<tr>
<td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"
Text='<%# Bind("Title") %>' Width="100" /></td>
<td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"
Text='<%# Bind("Description") %>' Width="150" /></td>
<td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"
Text='<%# Bind("Priority") %>' Width="40" /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"
TargetControlID="Panel9"
PopupControlID="PopupMenu"
HoverCssClass="popupHover"
PopupPosition="Right" />
<asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">
<div style="border:1px outset white">
<asp:LinkButton ID="LinkButton1" runat="server"
CausesValidation="True" CommandName="Update" Text="Update" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</div>
</asp:Panel>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
属性 | 说明 |
TargetControlID | 显示的Plane的ID |
HoverCssClass | 显示的Plane的CSS |
PopupPostion | 悬浮的位置:Left (默认), Right, Top, Bottom, Center |
OffsetX/OffsetY | 相对于默认值的偏移值 |
PopDelay | 出现Plane的延时,默认是100. |
Animations | 参照前面动画控件Animations |
效果:http://asp.net/AJAX/Control-Toolkit/Live/HoverMenu/HoverMenu.aspx
相关文章推荐
- altas(ajax)控件(十三):悬浮菜单HoverMenu
- altas(ajax)控件(十三):悬浮菜单HoverMenu
- altas(ajax)控件(十三):悬浮菜单HoverMenu
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二十三):等级选择控件Rating
- altas(ajax)控件(十八):拒绝机器人自动提交程序的控件NoBot
- altas(ajax)控件(二十):让BulletedList拥有客户端索引、分页和排序的控件
- altas(ajax)控件(三):动画制作控件AnimationExtender
- altas(ajax)控件(十七):互斥复选框控件MutuallyExclusiveCheckBox
- altas(ajax)控件(十):DropDown让文本框拥有下拉列表
- altas(ajax)控件(三):动画制作控件AnimationExtender
- altas(ajax)控件(三):动画制作控件AnimationExtender
- altas(ajax)控件(四):模糊匹配控件AutoComplete
- altas(ajax)控件(六):CascadingDropDown 联动选择的下拉框
- altas(ajax)控件(九):可拖动面板DragPanel
- altas(ajax)控件(十一):DropShadow为某一个控件添加阴影
- altas(ajax)控件(十二):FilteredTextBox