一个展开收合的ajaxToolkit:AccordionPane控件。Insus.NET在专案有用到它。 因为它可以节省显示空间。不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容。或是需要使用一个显而可见的名字。下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题。
下面是HTML:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
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 >
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:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/*
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 ;
}
.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 ;
}