AjaxToolKit学习笔记之 Accordion

最新推荐文章于 2024-10-08 16:16:54 发布

weixin_30673715

最新推荐文章于 2024-10-08 16:16:54 发布

阅读量76

点赞数

文章标签：开发工具

原文链接：http://www.cnblogs.com/msnadair/archive/2010/05/22/1741476.html

版权

1.功能描述

功能类似于TAB选项卡，可以将一组功能相似任务相同的内容放在选项卡内，然后通过选项卡的标题查看各组内容．　就像我们VS开发工具中的工具栏．

2.属性说明

SelectedIndex：已显示的AccordionPane控件的索引号．

HeaderCssClass：作用于标题的CSS样式．可以指定Accordion控件的HeraderCssClass属性，以此作为所有AccordionPane控件的默认属性值．或者直接指定定单独的AccordionPane控件的HeraderCssClass属性．

ContentCssClass：用于显示内容的CSS样式．使用方法类似于HeaderCssClass．

FadeTransitions：为true时是渐变效果（在伸缩时颜色变淡，伸缩完成后恢复正常）；为false时是标准变换．

TransitionDuration：在选择一标题后伸展和收缩过渡动画持续的时间，单位为毫秒．

FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数．

AutoSize：用于限制Accordion控件展开的高度．None：没有限制；Limit：不能超过控件的最开始设置高度．如果显示内容太多则会出现滚动条．Fill：始终精确保持和高度设置一样的尺寸．

Panes：AccordionPane控件集合．

HeaderTemplate：标题模板，其中包含的标记用于进行数据绑定来显示面板标题．

ContentTemplate：内容模板，其中包含的标记用于进行数据绑定来显示面板内容．

DataSource：指定数据源，必须要调用DataBind（）方法进行数据绑定．

DataSourceID：用数据源的ID来指定一个数据源．

DataMember：当使用DataSourceID来指定数据源时用于绑定的成员．

3.实例代码

代码

代码

< asp:Accordion ID ="Accordion1" runat ="server" SelectedIndex ="0" FadeTransitions ="true" FramesPerSecond ="40" TransitionDuration ="250" AutoSize ="None" RequireOpenedPane ="false" SuppressHeaderPostbacks ="true"
     CssClass ="accordion" HeaderCssClass ="accordionHeader" HeaderSelectedCssClass ="accordionHeaderSelected" ContentCssClass ="accordionContent" >
         < Panes >
            < asp:AccordionPane runat ="server" ID ="AccordionPane1" >
              < Header > AJAX Extensions </ Header >
              < Content >
              < a href ="#" > Pointer </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > ScriptManager </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > ScriptManagerProxy </ a >
              < a href ="#" > Timer </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > UpdatePanel </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > UpdateProgress </ a >
              < div class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >

            < asp:AccordionPane runat ="server" ID ="AccordionPane3" >
              < Header > Dynamic Data </ Header >
              < Content >
              < a href ="#" > Pointer </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicControl </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicDataManager </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicEntity </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicFilter </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicHyperLink </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > DynamicVlidator </ a >
              < div class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >
            < asp:AccordionPane runat ="server" ID ="AccordionPane2" >
              < Header > HTML </ Header >
              < Content >
              < a href ="#" > Pointer </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Button) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Reset) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Submit) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Text) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(File) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Password) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Radio) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Input(Hidden) </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Textarea </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Table </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Image </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Select </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Horizontal Rule </ a >
              < div class ="line" >< span ></ span ></ div >
              < a href ="#" > Div </ a >
              < div class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >
         </ Panes >

     </ asp:Accordion >

4.碰到的问题

无

5.总结

无

6.参考文档：

http://www.asp.net/ajaxlibrary/act_Accordion.ashx

转载于:https://www.cnblogs.com/msnadair/archive/2010/05/22/1741476.html