ajaxToolkit:AccordionPane演示与应用实例

一个展开收合的ajaxtoolkit:accordionpane控件。insus.net在专案有用到它。 因为它可以节省显示空间。不过有点不足，就是用户刚开始使用，需要记得每个accordionpane内容。或是需要使用一个显而可见的名字。下面的演示中，只是两个收合accordionpane，如果多个的话，就会有上面提及的问题。

下面是html:ajaxtoolkit:accordion

<ajaxtoolkit:accordion id="accordion1" runat="server" selectedindex="-1" headercssclass="accordionheader"
                headerselectedcssclass="accordionheaderselected" contentcssclass="accordioncontent"
                fadetransitions="true" framespersecond="5" transitionduration="250" autosize="none"
                requireopenedpane="false" suppressheaderpostbacks="true">
                <panes>
                    <ajaxtoolkit:accordionpane id="accordionpane1" runat="server">
                        <header>
                            条件
                        header>
                        <content>
                           <content>
                    ajaxtoolkit:accordionpane>
                    <ajaxtoolkit:accordionpane id="accordionpane4" runat="server">
                        <header>
                            日期
                        header>
                        <content>

                        <content>
                    <ajaxtoolkit:accordionpane>
                <panes>
            <ajaxtoolkit:accordion>

下面是css:accordion

.accordionheader
{
    border: 1px solid #acacac;
    color: #0f2336;
    background-color: #d2e6fa;
    font-family: arial, sans-serif;
    font-size: 12px;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordionheaderselected
{
    border: 1px solid #acacac;
    color: #0f2336;
    background-color: #97b3d1;
    font-family: arial, sans-serif;
    font-size: 12px;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.accordioncontent
{
    background-color: #f4f7fc;
    border: 1px dashed #acacac;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}