ajaxToolkit:AccordionPane演示与应用实例
更新时间：2021年9月22日 10:15 点击：1633
一个展开收合的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;
}
相关文章
ajaxToolkit:ModalPopupExtender演示及实现代码
ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,就是在模拟新开窗口作多项选项的功能,感兴趣的朋友可以了解下，希望此文对你有所帮助...2021-09-22ajaxToolkit:TextBoxWatermarkExtender演示与实现代码
该控件的效果就是在TextBox控件上添加“水印”效果，也就是当TextBox为空时，显示提示消息,一旦TextBox聚焦，样式就消失,看起来还挺不错的吗，感兴趣的你可以了解下哦，希望本文对你有所帮助...2021-09-22ajaxToolkit:AccordionPane演示与应用实例
ajaxToolkit:AccordionPane演示与应用实例，需要的朋友可以参考一下...2021-09-22ajaxToolkit:CalendarExtender演示与实现代码
Ajax的CalenderExtender的日期选择实现介绍，感兴趣的你可以了解下，就当是巩固知识，希望本文对你有所帮助...2021-09-22