第十二篇: Ajax Control Toolkit 控制項包–1. Accordion (多層摺疊效果）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1. 建立 Web表單：Accordion.aspx
2. 添加一個 ScriptManager 控制項
3. 添加一個 Accordion 控制項 (注意：拖動 Accordion 控制項到表單中時，表單是什麼也顯示的，只在源碼裡增加代碼）Code
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />

        <cc1:Accordion ID="Accordion1" runat="server">
        </cc1:Accordion>
        <br />
        <br />

    </div>
    </form>
</body>

4. 在 <cc1:Accordion ID="Accordion1" runat="server"></cc1:Accordion> 中添加 <Panes></Panes>

5. 在 <Panes></Panes> 中拖幾個AccordionPane進去（你需要幾層就拖幾個）

Code
        <cc1:Accordion ID="Accordion1" runat="server">
        <Panes>
            <cc1:AccordionPane ID="AccordionPane1" runat="server">
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane2" runat="server">
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane3" runat="server">
            </cc1:AccordionPane>
        </Panes>
        </cc1:Accordion>

6. 給 AccordionPanel 添加代碼:Code
        <cc1:Accordion ID="Accordion1" runat="server">
        <Panes>
            <cc1:AccordionPane ID="AccordionPane1" runat="server">
            <Header>這裡是標題1</Header>
            <Content>這裡是標題1 的內容</Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header>這裡是標題2</Header>
            <Content>
                這裡是標題2 的內容
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>這裡是標題3 </Header>
            <Content>這裡是標題3 的內容</Content>
            </cc1:AccordionPane>
        </Panes>
        </cc1:Accordion>

7. OK,運行，已經可以用了，只是沒有邊框和顔色。

8. 現在要做的就是給標題加上邊框的顔色。
    ① 開啟 Accordion1 屬性面板,設定大小, Height(300px) , Width(200px)
    ② 設定標題樣式, HeaderCssClass(accordionHeader)
    ③ 設定內容樣式, ContentCssClass(accordionContant)

8. 建立樣式。Code
    <style type="text/css">
        .accordionHeader
        {
            color: #FFFF00;
            background-color: #3399FF;
            border: 1px solid #FF6600;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
        }
        .accordionContent
        {
            background-color: #FF9933;
            padding: 1px;
            margin: 1px;
        }
    </style>

9. OK,試試看吧！！！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More