欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajaxToolkit:AccordionPane演示与应用实例

程序员文章站 2024-03-02 11:39:22
一个展开收合的ajaxtoolkit:accordionpane控件。insus.net在专案有用到它。 因为它可以节省显示空间。不过有点不足,就是用户刚开始使用,需要记得...

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

ajaxToolkit: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;
}