作者:钱靖均秀蓉怡慧 | 来源:互联网 | 2022-08-15 14:00
一个展开收合的ajaxToolkit:AccordionPane控件。Insus.NET在专案有用到它。 因为它可以节省显示空间。不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容。或是需要使用一个显而可见的名字。下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题。
下面是HTML:ajaxToolkit:Accordion
代码如下:
HeaderSelectedCssClass="accordionHeaderSelected" COntentCssClass="accordionContent"
FadeTransitiOns="true" FramesPerSecOnd="5" TransitiOnDuration="250" AutoSize="None"
RequireOpenedPane="false" SuppressHeaderPostbacks="true">
条件
Header>
ajaxToolkit:AccordionPane>
日期
Header>
下面是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;
}