萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> .net編程 >> PopupControlExtender(彈出窗口)的用法

PopupControlExtender(彈出窗口)的用法

class="area"> PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.

TargetControlID——附加到的控件的ID

PopupControlID——彈出顯示的控件ID

Position——彈出控件相對目標控件的位置(Left,Right, Top, Bottom, Center)

CommitProperty——目標控件要從彈出控件得到的屬性值(可選)

CommotScript——獲取彈出控件屬性值的腳本

OffsetX/OffsetY——水平、豎直方向距默認位置的偏移距離

Animations

——OnShow

——OnHide

示例代碼:

復制代碼
 1 <asp:ScriptManager ID="ScriptManager1" runat="server" />
2 <div>
3 <br />
4 ToDo:
5 <asp:TextBox ID="MyTextBox" runat="server" Width="538px"></asp:TextBox>
6 <br />
7 <asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
8 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
9 <ContentTemplate>
10 <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
11 Width="146px">
12 <asp:ListItem Text="Scott Guthrie" ></asp:ListItem>
13 <asp:ListItem Text="Simon Muzio"></asp:ListItem>
14 <asp:ListItem Text="Brian Goldfarb"></asp:ListItem>
15 <asp:ListItem Text="Joe Stagner"></asp:ListItem>
16 <asp:ListItem Text="Shawn Nandi"></asp:ListItem>
17 </asp:RadioButtonList>
18 </ContentTemplate>
19 </asp:UpdatePanel>
20 </asp:Panel>
21 <br />
22 <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" CommitProperty="value"
23 CommitScript="e.value += ' - SEND A MEETING REQUEST!';" PopupControlID="Panel1"
24 Position="Bottom" TargetControlID="MyTextBox">
25 </ajaxToolkit:PopupControlExtender>
26
27 </div>
復制代碼

簡單CSS

復制代碼
.popupControl
{
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
復制代碼

  

copyright © 萬盛學電腦網 all rights reserved