0001:
??? Accordion控件的使用:折疊面板的控件
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>Accordion控件的使用</title>
??????? <style type="text/css">
??????? /*面板頭的樣式*/
??????? .accordionHeader
??????? {
??????????? border: 1px solid #2F4F4F;
??????????? color: white;
??????????? background-color: rgb(30%,50%,70%);
???????? font-family: Arial, Sans-Serif;
???????? font-size: 12px;
???????? font-weight: bold;
??????????? padding: 5px;
??????????? margin-top: 5px;
??????????? cursor: pointer;
??????? }
??????? /*面板內(nèi)容的樣式*/
??????? .accordionContent
??????? {
??????????? background-color: rgb(50%,70%,90%);
??????????? border: 1px dashed #2F4F4F;
??????????? border-top: none;
??????????? padding: 5px;
??????????? padding-top: 10px;
??????? }??
??????? </style>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <cc1:Accordion
??????????????? ID="Accordion1"
??????????????? runat="server"
??????????????? SelectedIndex="0"
??????????????? HeaderCssClass="accordionHeader"
??????????????? ContentCssClass="accordionContent"
??????????????? FadeTransitions="false"
??????????????? FramesPerSecond="40"
??????????????? TransitionDuration="250"
??????????????? AutoSize="None"
??????????????? RequireOpenedPane="false"
??????????????? SuppressHeaderPostbacks="true">
??????????????? <Panes>
??????????????????? <cc1:AccordionPane ID="AccordionPane1" runat="server">
??????????????????????? <Header>第一部分</Header>
??????????????????????? <Content>
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA。
??????????????????????? </Content>
??????????????????? </cc1:AccordionPane>
??????????????????? <cc1:AccordionPane ID="AccordionPane2" runat="server">
??????????????????????? <Header>第二部分</Header>
??????????????????????? <Content>
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA。
??????????????????????? </Content>
??????????????????? </cc1:AccordionPane>
??????????????? </Panes>
??????????? </cc1:Accordion>???????
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0002:
??? AlwaysVisibleControlExtender控件的使用:類似于浮動廣告的樣子
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>AlwaysVisibleControlExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <cc1:AlwaysVisibleControlExtender
??????????????? ID="AlwaysVisibleControlExtender1"
??????????????? runat="server"
??????????????? TargetControlID="showAlways"
??????????????? VerticalSide="Top"
??????????????? VerticalOffset="10"
??????????????? HorizontalSide="Right"
??????????????? HorizontalOffset="10"
??????????????? ScrollEffectDuration=".1">
??????????? </cc1:AlwaysVisibleControlExtender>
??????????? <asp:Panel runat="server" id="showAlways" BackColor="#C0C0FF" Height="100px" Width="150px"></asp:Panel>
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0003:
??? AutoCompleteExtender控件的使用:自動完成控件的使用
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>AutoCompleteExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Office"></asp:TextBox>
??????????? <cc1:AutoCompleteExtender
??????????????? ID="AutoCompleteExtender1"
??????????????? runat="server"
??????????????? TargetControlID="TextBox1"
??????????????? ServicePath="GetData.asmx"
??????????????? ServiceMethod="GetCompletionList"
??????????????? MinimumPrefixLength="2"
??????????????? CompletionInterval="1000"
??????????????? EnableCaching="true"
??????????????? CompletionSetCount="5">
??????????? </cc1:AutoCompleteExtender>
??????? </form>
??? </body>
??? </html>
??? Web服務(wù)部分:GetData.asmx
??? [System.Web.Script.Services.ScriptService]
??? public class GetData : System.Web.Services.WebService
??? {
??????? [WebMethod]
??????? public string[] GetCompletionList(string prefixText, int count)
??????? {
??????????? string[] list = new string[count];
??????????? for (int i = 0; i < count; i++)
??????????? {
??????????????? list[i] = prefixText + "-------";
??????????? }
??????????? return list;
??????? }
??? }
----------------------------------------------------------------------------------------------------
0004:
??? CascadingDropDown控件的使用:能夠?qū)崿F(xiàn)下拉列表框的聯(lián)動,這里實現(xiàn)的是區(qū)省市的聯(lián)動
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>CascadingDropDown控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
??????????? <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
??????????? <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList>
??????????? <cc1:CascadingDropDown
??????????????? ID="CascadingDropDown1"
??????????????? runat="server"
??????????????? TargetControlID="DropDownList1"
??????????????? Category="分區(qū)"?
??????????????? PromptText="請選擇分區(qū)"? LoadingText="正在加載..."
??????????????? ServicePath="GetData.asmx"
??????????????? ServiceMethod="GetData1" >
??????????? </cc1:CascadingDropDown>
??????????? <cc1:CascadingDropDown
??????????????? ID="CascadingDropDown2"
??????????????? runat="server"
??????????????? TargetControlID="DropDownList2"
??????????????? Category="省份"
??????????????? PromptText="請選擇省份"
??????????????? LoadingText="正在加載..."
??????????????? ServicePath="GetData.asmx"
??????????????? ServiceMethod="GetData2"
??????????????? ParentControlID="DropDownList1" >
??????????? </cc1:CascadingDropDown>
??????????? <cc1:CascadingDropDown
??????????????? ID="CascadingDropDown3"
??????????????? runat="server"
??????????????? TargetControlID="DropDownList3"
??????????????? Category="城市"
??????????????? PromptText="請選擇城市"
??????????????? LoadingText="正在加載..."
??????????????? ServicePath="GetData.asmx"?
??????????????? ServiceMethod="GetData3"
??????????????? ParentControlID="DropDownList2" >
??????????? </cc1:CascadingDropDown>
??????? </form>
??? </body>
??? </html>
??? Web服務(wù)部分:GetData.asmx
??? [System.Web.Script.Services.ScriptService]
??? public class GetData : System.Web.Services.WebService
??? {
??????? [WebMethod]
??????? public AjaxControlToolkit.CascadingDropDownNameValue[] GetData1(string knownCategoryValues, string category)
??????? {
??????????? AjaxControlToolkit.CascadingDropDownNameValue[] aList = new AjaxControlToolkit.CascadingDropDownNameValue[2];
??????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("北方", "1");
??????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("南方", "2");
??????????? return aList;
??????? }
??????? [WebMethod]
??????? public AjaxControlToolkit.CascadingDropDownNameValue[] GetData2(string knownCategoryValues, string category)
??????? {
??????????? System.Collections.Specialized.StringDictionary kv = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
??????????? //id1就保存著上一個控件所選擇的編碼
??????????? int id1;
??????????? if (kv.ContainsKey("分區(qū)") == false || Int32.TryParse(kv["分區(qū)"], out id1) == false)
??????????? {
??????????????? return null;
??????????? }
??????????? AjaxControlToolkit.CascadingDropDownNameValue[] aList = new AjaxControlToolkit.CascadingDropDownNameValue[2];
??????????? if (id1 == 1)
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("河北省", "1");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("山東省", "2");
??????????? }
??????????? else
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("廣東省", "3");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("廣西省", "4");
??????????? }
??????????? return aList;
??????? }
??????? [WebMethod]
??????? public AjaxControlToolkit.CascadingDropDownNameValue[] GetData3(string knownCategoryValues, string category)
??????? {
??????????? System.Collections.Specialized.StringDictionary kv = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
??????????? //id1就保存著上一個控件所選擇的編碼
??????????? int id2;
??????????? if (kv.ContainsKey("省份") == false || Int32.TryParse(kv["省份"], out id2) == false)
??????????? {
??????????????? return null;
??????????? }
??????????? AjaxControlToolkit.CascadingDropDownNameValue[] aList = new AjaxControlToolkit.CascadingDropDownNameValue[2];
??????????? if (id2 == 1)
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("三河市", "1");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("廊坊市", "2");
??????????? }
??????????? else if (id2 == 2)
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("煙臺市", "1");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("淄博市", "2");
??????????? }
??????????? else if (id2 == 3)
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("廣州市", "1");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("肇慶市", "2");
??????????? }
??????????? else
??????????? {
??????????????? aList[0] = new AjaxControlToolkit.CascadingDropDownNameValue("柳州市", "1");
??????????????? aList[1] = new AjaxControlToolkit.CascadingDropDownNameValue("桂林市", "2");
??????????? }
??????????? return aList;
??????? }
??? }
----------------------------------------------------------------------------------------------------
0005:
??? CollapsiblePanelExtender控件的使用:折疊面板
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>CollapsiblePanelExtender控件的使用</title>
??????? <style type="text/css">
??????? .collapsePanel
??????? {
??????????? background-color:white;
??????????? overflow:hidden;
??????? }
??????? .collapsePanelHeader
??????? {?
??????????? width:100%;??
??????????? height:30px;
??????????? background-image: url(images/bg-menu-main.png);
??????????? background-repeat:repeat-x;
??????????? color:#FFF;
??????????? font-weight:bold;
??????? }
??????? </style>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
??????????????? <div style="padding:5px; cursor: pointer; vertical-align: middle;">
??????????????????? <div style="float: left;">What is ASP.NET AJAX?</div>
??????????????????? <div style="float: left; margin-left: 20px;">
??????????????????????? <asp:Label ID="Label1" runat="server"></asp:Label>
??????????????????? </div>
??????????????????? <div style="float: right; vertical-align: middle;">
??????????????????????? <asp:ImageButton
??????????????????????????? ID="Image1"
??????????????????????????? runat="server"
??????????????????????????? ImageUrl="~/images/expand_blue.jpg"/>
??????????????????? </div>
??????????????? </div>
??????????? </asp:Panel>
??????????? <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
??????????? <br />
??????????? <p>
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
??????????????? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA。
??????????? </p>
??????????? </asp:Panel>
??????????? <cc1:CollapsiblePanelExtender
??????????????? ID="CollapsiblePanelExtender1"
??????????????? runat="Server"
??????????????? TargetControlID="Panel1"
??????????????? ExpandControlID="Panel2"
??????????????? CollapseControlID="Panel2"
??????????????? Collapsed="True"
??????????????? TextLabelID="Label1"
??????????????? ImageControlID="Image1"
??????????????? ExpandedImage="~/images/collapse_blue.jpg"
??????????????? CollapsedImage="~/images/expand_blue.jpg"
??????????????? SuppressPostBack="true"/>
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0006:
??? ConfirmButtonExtender控件的使用:確定提示框的實現(xiàn),也可以綁定到LinkButton上
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>ConfirmButtonExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Button ID="Button1" runat="server" Text="Button" />
??????????? <cc1:ConfirmButtonExtender
??????????????? ID="ConfirmButtonExtender1"
??????????????? runat="server"
??????????????? TargetControlID="Button1"
??????????????? ConfirmText="確定么?" >
??????????? </cc1:ConfirmButtonExtender>
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0007:
??? DragPanelExtender控件的使用:拖動面板的實現(xiàn)
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>DragPanelExtender控件的使用</title>
??????? <style type="text/css">
??????? .dragMe
??????? {
???????? width:100%;
???????? height:21px;
???????? background-color:#FFF;
???????? text-align:center;
???????? cursor:move;
???????? font-weight:bold;
??????? }
??????? </style>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <div style="height: 300px; width: 250px; float: left; padding: 5px;" >
??????????????? <asp:Panel
??????????????????? ID="Panel1"
??????????????????? runat="server"
??????????????????? Width="250px"
??????????????????? style="z-index: 20;">
??????????????????? <asp:Panel
??????????????????????? ID="Panel2"
??????????????????????? runat="server"
??????????????????????? Width="250px"
??????????????????????? Height="20px"
??????????????????????? BorderStyle="Solid"
??????????????????????? BorderWidth="2px"
??????????????????????? BorderColor="black">
??????????????????????? <div class="dragMe">拖動</div>
??????????????????? </asp:Panel>
??????????????????? <asp:Panel?
??????????????????????? ID="Panel8"
??????????????????????? runat="server"
??????????????????????? Width="250px"
??????????????????????? Height="250px"
??????????????????????? BackColor="#0B3D73"
??????????????????????? ForeColor="whitesmoke"
??????????????????????? BorderWidth="2px"
??????????????????????? BorderColor="black"
??????????????????????? BorderStyle="Solid" >
??????????????????????? <div>
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAAAAAAAA
??????????????????????????? AAAAAAAAAAAAAAAA。
??????????????????????? </div>
??????????????????? </asp:Panel>
??????????????? </asp:Panel>???
??????????? </div>
??????????? <cc1:DragPanelExtender
??????????????? ID="DragPanelExtender1"
??????????????? runat="server"
??????????????? TargetControlID="Panel1"
??????????????? DragHandleID="Panel2" />
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0008:
??? DropShadowExtender控件的使用:陰影效果的實現(xiàn)
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>DropShadowExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Panel ID="Panel1" Width="200px" Height="150px" BackColor="blue" runat="server"></asp:Panel>
??????????? <cc1:DropShadowExtender
??????????????? ID="DropShadowExtender1"
??????????????? runat="server"
??????????????? TargetControlID="Panel1"
??????????????? Width="5"
??????????????? Rounded="true"
??????????????? Radius="6"
??????????????? Opacity=".75"
??????????????? TrackPosition="true" />
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0009:
??? FilteredTextBoxExtender控件的使用:只能輸入某些符號的文本框,此例子只能輸入數(shù)字和+-.
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>FilteredTextBoxExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:TextBox ID="TextBox1" runat="server" />
??????????? <cc1:FilteredTextBoxExtender
?????????????? ID="FilteredTextBoxExtender1"
?????????????? runat="server"
?????????????? TargetControlID="TextBox1"
?????????????? FilterType="Custom,Numbers"
?????????????? ValidChars="+-." />
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0010:
??? HoverMenuExtender控件的使用:自動彈出的信息提示框
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>HoverMenuExtender控件的使用</title>
??????? <style type="text/css">
??????? .popupMenu
??????? {
???????? position:absolute;
???????? visibility:hidden;
???????? background-color:#F5F7F8;
???????? opacity:.9;
???????? filter: alpha(opacity=90);
??????? }
??????? .popupHover
??????? {
???????? background-repeat:repeat-x;
???????? background-position:left top;
???????? background-color:#F5F7F8;
??????? }
??????? </style>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Button ID="Button1" runat="server" Text="Button" />
??????????? <cc1:HoverMenuExtender
??????????????? ID="hme1"
??????????????? runat="Server"
??????????????? TargetControlID="Button1"
??????????????? PopupControlID="PopupMenu"
??????????????? HoverCssClass="popupHover"
??????????????? PopupPosition="Right" />
??????????? <asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="80">
??????????????? <div style="border:1px outset white; width:100px; height:25px">
??????????????????? 這是一個按鈕
??????????????? </div>
??????????? </asp:Panel>
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0011:
??? ModalPopupExtender控件的使用:模式對話框,確定按鈕只能執(zhí)行客戶端腳本,當(dāng)然,可以從客戶端調(diào)用服務(wù)
器方法。
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>ModalPopupExtender控件的使用</title>
??????? <style type="text/css">
??????? .modalPopup
??????? {
???????? background-color:#ffffdd;
???????? border-width:3px;
???????? border-style:solid;
???????? border-color:Gray;
???????? padding:3px;
???????? width:250px;
??????? }
??????? .modalBackground
??????? {
???????? background-color:Gray;
???????? filter:alpha(opacity=70);
???????? opacity:0.7;
??????? }
??????? </style>
??????? <script type="text/javascript">
??????? function OnOk()
??????? {
??????????? alert("執(zhí)行了");
??????? }
??????? </script>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:LinkButton ID="LinkButton1" runat="server" Text="打開模式對話框" />
???????????
??????????? <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
??????????????? <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
??????????????????? <div>
??????????????????????? <p>確認執(zhí)行操作么?</p>
??????????????????? </div>
??????????????? </asp:Panel>
??????????????????? <div>
??????????????????????? <p style="text-align: center;">
??????????????????????????? <asp:Button ID="OkButton" runat="server" Text="確認"/>
??????????????????????????? <asp:Button ID="CancelButton" runat="server" Text="取消" />
??????????????????????? </p>
??????????????????? </div>
??????????? </asp:Panel>
???????????
??????????? <cc1:ModalPopupExtender
??????????????? ID="ModalPopupExtender"
??????????????? runat="server"
??????????????? TargetControlID="LinkButton1"
??????????????? PopupControlID="Panel1"
??????????????? BackgroundCssClass="modalBackground"
??????????????? OkControlID="OkButton"
??????????????? OnOkScript="OnOk()"
??????????????? CancelControlID="CancelButton"
??????????????? DropShadow="true"
??????????????? PopupDragHandleControlID="Panel3" />
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0012:
??? MutuallyExclusiveCheckboxExtender控件的使用:只能選一組中其中一個Checkbox
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>MutuallyExclusiveCheckboxExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Checkbox runat="server" id="Checkbox1" Text="男" />
??????????? <asp:Checkbox runat="server" id="Checkbox2" Text="女" />
???????? <cc1:MutuallyExclusiveCheckboxExtender
???????????? ID="MutuallyExclusiveCheckboxExtender1"
???????????? runat="server"
???????????? TargetControlID="Checkbox1"
???????????? Key="SexCheckBox" />
???????? <cc1:MutuallyExclusiveCheckboxExtender
???????????? ID="MutuallyExclusiveCheckboxExtender2"
???????????? runat="server"
???????????? TargetControlID="Checkbox2"
???????????? Key="SexCheckBox" />
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0013:
??? PopupControlExtender控件的使用:彈出窗口控件,這里實現(xiàn)的是日期選擇
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>PopupControlExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="office"></asp:TextBox>
??????????? <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
??????????????? <asp:UpdatePanel ID="UpdatePanel1" runat="server">
??????????????????? <ContentTemplate>
??????????????????????? <center>
??????????????????????????? <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"
??????????????????????????????? BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
??????????????????????????????? ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px" OnSelectionChanged="Calendar1_SelectionChanged">
??????????????????????????????? <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
??????????????????????????????? <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
??????????????????????????????? <SelectorStyle BackColor="#FFCC66" />
??????????????????????????????? <OtherMonthDayStyle ForeColor="#CC9966" />
??????????????????????????????? <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
??????????????????????????????? <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
??????????????????????????????? <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
??????????????????????????? </asp:Calendar>
??????????????????????? </center>
??????????????????? </ContentTemplate>
??????????????? </asp:UpdatePanel>
??????????? </asp:Panel>
??????????? <cc1:PopupControlExtender
??????????????? ID="PopupControlExtender1"
??????????????? runat="server"
??????????????? TargetControlID="TextBox1"
??????????????? PopupControlID="Panel1"
??????????????? Position="Bottom">
??????????? </cc1:PopupControlExtender>
??????? </form>
??? </body>
??? </html>
??? CS部分:
??? protected void Calendar1_SelectionChanged(object sender, EventArgs e)
??? {
??????? this.PopupControlExtender1.Commit(this.Calendar1.SelectedDate.ToShortDateString());
??? }
----------------------------------------------------------------------------------------------------
0014:
??? RoundedCornersExtender控件的使用:控件的圓角效果
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>RoundedCornersExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:Panel ID="Panel1" Width="150px" Height="100px" BackColor="gray" runat="server"></asp:Panel>
??????????? <cc1:RoundedCornersExtender
??????????????? ID="RoundedCornersExtender1"
??????????????? runat="server"
??????????????? TargetControlID="Panel1"
??????????????? Radius="6"
??????????????? Corners="All">
??????????? </cc1:RoundedCornersExtender>
??????? </form>
??? </body>
??? </html>
----------------------------------------------------------------------------------------------------
0015:
??? SlideShowExtender控件的使用:自動播放圖片控件
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>SlideShowExtender控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <div style="text-align:center">
??????????????? <asp:Image ID="Image1" runat="server"
??????????????????? Height="300"
??????????????????? Style="border: 1px solid black;width:auto"
??????????????????? ImageUrl="~/images/AJAX.gif"
??????????????????? AlternateText="Blue Hills image" />
??????????????? <asp:Label runat="Server" ID="imageLabel1"/><br /><br />
??????????????? <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
??????????????? <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
??????????????? <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
??????????????? <cc1:SlideShowExtender ID="slideshowextend1" runat="server"
??????????????????? TargetControlID="Image1"
??????????????????? SlideShowServicePath="GetData.asmx"
??????????????????? SlideShowServiceMethod="GetSlides"
??????????????????? AutoPlay="true"
??????????????????? ImageDescriptionLabelID="imageLabel1"
??????????????????? NextButtonID="nextButton"
??????????????????? PlayButtonText="Play"
??????????????????? StopButtonText="Stop"
??????????????????? PreviousButtonID="prevButton"
??????????????????? PlayButtonID="playButton"
??????????????????? Loop="true" />
??????????? </div>
??????? </form>
??? </body>
??? </html>
??? Web服務(wù)部分:GetData.asmx
??? [System.Web.Script.Services.ScriptService()]
??? public class GetData : System.Web.Services.WebService
??? {
??????? [WebMethod]
??????? public AjaxControlToolkit.Slide[] GetSlides()
??????? {
??????????? return new AjaxControlToolkit.Slide[]
??????????? {
??????????????? new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),
??????????????? new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
??????????????? new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
??????????????? new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),
??????????????? new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")
??????????? };
??????? }
??? }
----------------------------------------------------------------------------------------------------
0016:
??? TabContainer控件的使用:
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>TabContainer控件的使用</title>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <cc1:TabContainer runat="server" ID="Tabs" Height="150px">
??????????????? <cc1:TabPanel runat="Server" ID="Panel1" HeaderText="第一部分">
??????????????????? <ContentTemplate>
??????????????????????? <div style="width:100%; height:100%; background-color:rgb(70%,80%,90%)">
??????????????????????????? <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
??????????????????????????? <asp:Button ID="Button1" runat="server" Text="按鈕1" OnClick="Button1_Click"/>??
??????????????????????? </div>?????
??????????????????? </ContentTemplate>
??????????????? </cc1:TabPanel>
??????????????? <cc1:TabPanel runat="Server" ID="TabPanel1" HeaderText="第二部分">
??????????????????? <ContentTemplate>
??????????????????????? <div style="width:100%; height:100%; background-color:rgb(90%,80%,70%)">
??????????????????????????? <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
??????????????????????????? <asp:Button ID="Button2" runat="server" Text="按鈕2" OnClick="Button2_Click"/>??
??????????????????????? </div>?????
??????????????????? </ContentTemplate>
??????????????? </cc1:TabPanel>
??????????? </cc1:TabContainer>
??????? </form>
??? </body>
??? </html>
??? CS部分:
??? protected void Button1_Click(object sender, EventArgs e)
??? {
??????? this.TextBox1.Text = DateTime.Now.ToLongTimeString();
??? }
??? protected void Button2_Click(object sender, EventArgs e)
??? {
??????? this.TextBox2.Text = this.TextBox1.Text;
??? }
----------------------------------------------------------------------------------------------------
0017:
??? TextBoxWatermarkExtender控件的使用:水印效果,可以用來實現(xiàn)提示輸入信息的說明
??? <html xmlns="
http://www.w3.org/1999/xhtml
" >
??? <head runat="server">
??????? <title>TextBoxWatermarkExtender控件的使用</title>
??????? <style type="text/css">
??????? .unwatermarked
??????? {
???????? height:18px;
???????? width:148px;
???????? font-weight:bold;
??????? }
??????? .watermarked
??????? {
???????? height:20px;
???????? width:150px;
???????? padding:2px 0 0 2px;
???????? border:1px solid #BEBEBE;
???????? background-color:#F0F8FF;
???????? color:gray;
??????? }?
??????? </style>
??? </head>
??? <body>
??????? <form id="form1" runat="server">
??????????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????????? <asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server" />
??????????? <cc1:TextBoxWatermarkExtender
??????????????? ID="TextBoxWatermarkExtender1"
??????????????? runat="server"
??????????????? TargetControlID="TextBox1"
??????????????? WatermarkText="輸入姓名"
??????????????? WatermarkCssClass="watermarked" />
??????? </form>
??? </body>
??? </html>
Atlas控件使用說明