AJAX Control Toolkit：Accordion控制項

AJAX Control Toolkit：Accordion控制項_範例01
◎名稱： Accordion(包含Accordion和AccordionPane，需同時使用)
◎類型： web控制項
◎功能：像gmail閱讀信箱時可展開、收合的折疊頁
.範例01程式碼：

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <div>
        <ajaxToolkit:Accordion ID="Accordion1" runat="server">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent">
            <Header>◎會員註冊---必填欄位</Header>
            <Content>必填欄位放的位置</p>=======</p>111111111</p>222222222</p>33333</Content>
            </ajaxToolkit:AccordionPane>
            
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent">
            <Header>◎會員註冊---進階選填</Header>
            <Content>選填欄位放的位置</p>========</p>aaaaaaaaaa</p>bbbb</p>ccccc</Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
        </ajaxToolkit:Accordion>

範例01程式碼說明-

1. 在網頁加入ToolkitScriptManager
2. 把Accordion拖放到網頁中(自動生成行01、行11)
3. 以下因為Accordion本身有bug(詳見dnow文AJAX Control Toolkit中Accordion控制項有bug)，所以後面都要用原始檔檢視畫面來建立標籤和設定部分標籤屬性
4. 用「原始檔」檢視，加入<panes>標籤(行05、行15)，以便放入AccordionPane控制項
5. 在<panes>標籤中插入AccordionPane(自動生成行6)，然後在<ajaxToolkit:AccordionPane >標籤中間手動輸入<header>、<content>標記(行7、行8)
6. 若還要再加一個AccordionPane，就依照上面方式增加，效果如行11以後

.範例01檢視頁：Accordion控制項_範例01

範例01檢視結果-

1. 摺頁效果和CollapsiblePanel控制項不同，Accordion一次只可以有一個AccordionPane可以展開。
2. 版面顏色過於單調，可以透過css來設定Accordion版型。
3. 摺頁效果沒有提示，沒有細看項目及輔助說明文字可能不知道可以點開，可以修改移到上方的游標圖示。
4. 使用Accordion後，panes裡面的東西都不可以用所見所得的方式來設計，可以用加入panel的方式來解決。