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

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

上載者：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,試試看吧！！！

10.常用屬性解釋

1、設定大小, Height(300px) , Width(200px)
2、設定標題樣式, HeaderCssClass(accordionHeader)
3、設定內容樣式, ContentCssClass(accordionContant)

4、設定淡出淡入,FadeTransitions="true/false"

5、選擇索引,SelectedIndex="0/1/2/3/4"

6、自動大小(捲軸),AutoSize

7、TransitionDuration: 展開或者摺疊一個AccordionPane的時間,以毫秒為單位計算。

8、FramesPerSecond: 展開或者摺疊一個AccordionPane每秒鐘的幀數。

9、Accordion的顯示和排版方式。

Accordion 支援以下三種顯示和排版方式：

None - Accordion 在其展開或者摺疊過程中，將根據它內部顯示的內容自動尺寸的變化，不受到任何的條件限制。如果將 AutoSize 屬性設定為 None 它將可能造成頁面上的其它元素跟隨 Accordion 的尺寸變化產生向上或者向下的移動。
Limit - 它將使得 Accordion 控制項永遠不能將它的尺寸擴充到規定的高度（Height）屬性之外，如果將 AutoSize 屬性設定為 Limit，可能會造成在某種情況下，它裡面的內容需要通過捲軸來滾動。
Fill - 它將使得 Accordion 控制項永遠都保持在其高度（Height）屬性規定的高度。

10、RequireOpenedPane: 如果設定為true,如果展開一個accordionPane,它就不再會被摺疊。

11、SupporessHeaderPostbakcs: 如果設定為True,那麼可以避免當點擊某個Pane時頁面會發生提交事件,也就是是否顯示頁面整個重新整理。

12、HeaderTemplate/ContentTemplate, DataSource ,DataSourceID, DataMember.這幾個都是資料繫結時用到的,這篇文章不會涉及到。

本文章原先以中文撰寫並發佈於 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