第一步:设置Accordion组件在这个例子里我们只需要一个Accordion组件、N个AccordionPane组件以及N篇演示文章。首先我们先拖进一个Accordion组件,并作相关设置。具体设置如下。<ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="Content" HeaderCssClass="Header" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"> </ajaxToolkit:Accordion>ContentCssClass是指内容区域的样式名,而HeaderCssClass是指头部区域的样式名,具体的样式大家自行定义,稍后我也会给出我自己用的样式。FadeTransitions是指伸缩内容区域时是否播放渐变效果,FramesPerSecond是指伸缩内容区域的动画桢数,桢数越大动画就越流畅。TransitionDuration是指伸缩区域所需要的时间,单位是毫秒,时间越大,伸缩区域所需要的时间就越长。最后附上我自己写的样式表: .Header{ font-size:12px; color:#ffffff; background:#666666; font-weight:bold;} .Content{ font-size:12px; color:#003366; background:#ffffcc;}第二步:添加AccordionPane设置好Accordion之后我们可以添加内容了。注意所有内容必须在<Panes>标签内,每篇内容对应一个AccordionPane组件。本例子一共有四篇文章,所以我用了四个AccordionPane组件,所有代码如下:<ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="Content" HeaderCssClass="Header" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> 第一章 </Header> <Content> 这里是第一章的故事:在很久很久以前,从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢? 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> 第二章 </Header> <Content> 这里是第二章的故事:在很久很久以前,从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢? 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header> 第三章 </Header> <Content> 这里是第三章的故事:在很久很久以前,从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢? 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server"> <Header> 第四章 </Header> <Content> 这里是第四章的故事:在很久很久以前,从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢? 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… 从前有座山,山上有个庙,庙里有个和尚在讲故事,讲什么呢…… </Content> </ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>注意:AccordionPane里的<Header>和<Content>标签内的内容是支持HTML和Javascript的。到了这里一切已经设置完毕,运行!效果如下图:
轻松掌握Ajax.net系列教程九:使用Accordion
最新推荐文章于 2024-09-21 09:29:16 发布