zoukankan      html  css  js  c++  java
  • Atlas控件使用说明

    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;
            }
            /*面板内容的样式*/
            .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服务部分: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控件的使用:能够实现下拉列表框的联动,这里实现的是区省市的联动
        <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="分区" 
                    PromptText="请选择分区"  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服务部分: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("分区") == false || Int32.TryParse(kv["分区"], 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
            { 
                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控件的使用:确定提示框的实现,也可以绑定到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控件的使用:拖动面板的实现
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head runat="server">
            <title>DragPanelExtender控件的使用</title>
            <style type="text/css">
            .dragMe
            {
             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; 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控件的使用:阴影效果的实现
        <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控件的使用:只能输入某些符号的文本框,此例子只能输入数字和+-.
        <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; 100px; height:25px">
                        这是一个按钮
                    </div>
                </asp:Panel>
            </form>
        </body>
        </html>
    ----------------------------------------------------------------------------------------------------
    0011:
        ModalPopupExtender控件的使用:模式对话框,确定按钮只能执行客户端脚本,当然,可以从客户端调用服务
    器方法。
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head runat="server">
            <title>ModalPopupExtender控件的使用</title>
            <style type="text/css">
            .modalPopup
            {
             background-color:#ffffdd;
             border-3px;
             border-style:solid;
             border-color:Gray;
             padding:3px;
             250px;
            }
            .modalBackground
            {
             background-color:Gray;
             filter:alpha(opacity=70);
             opacity:0.7;
            }
            </style>
            <script type="text/javascript">
            function OnOk()
            {
                alert("执行了");
            }
            </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>确认执行操作么?</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控件的使用:弹出窗口控件,这里实现的是日期选择
        <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;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服务部分: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="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="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控件的使用:水印效果,可以用来实现提示输入信息的说明
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head runat="server">
            <title>TextBoxWatermarkExtender控件的使用</title>
            <style type="text/css">
            .unwatermarked
            {
             height:18px;
             148px;
             font-weight:bold;
            }
            .watermarked
            {
             height:20px;
             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>

  • 相关阅读:
    一站式学习Wireshark第六章
    一站式学习Wireshark第七章
    一站式学习Wireshark第八章
    一站式学习Wireshark第九章
    一站式学习Wireshark第十章
    一站式学习Wireshark第一章
    第二周的学习进度
    架构漫谈随笔
    淘宝网描绘质量属性六个常见属性场景
    二月十五日
  • 原文地址:https://www.cnblogs.com/weichuo/p/1152450.html
Copyright © 2011-2022 走看看