AJAX ControlToolkit学习日志-Accordion

  今天自己要踏上开始学习AJAX ControlToolkit的旅程了。它提供了对许多已经封装好的可以直接使用的控件。今天自己学习了Accordion控件,它是一个可折叠的控件。

(1)Accordion控件重要属性介绍

      a )RequireOpenedPane:当单击控件的Pane中的header时,是否关闭打开的Pane。当值为True时,则不关闭该Pane;当值为False时,则关闭该Pane。
      b )SuppressHeaderPostBacks:当在客户端单击控件的Pane中的header中的元素时,是否阻止其进行回传。当值为True时,则阻止其回传;当值为False时,则不阻止其回传。
      c )FadeTransitions:当值为True时,则使用淡入淡出的转化效果;当值为False时,则使用标准的转化效果。
      d )TransitionDuration:设定转换的时间(或速度)。数值越小,转换越快;数值越大,转换越慢。
      e )FramesPerSecond:每秒的帧数。
      f )SelectedIndex:设定页面初始导入时显示的Pane。值为0,为第一个;值为1,为第二个。
      g )HeaderCssClass:设定Pane中header的css样式。
      h )ContentCssClass:设定Pane中Content的css样式。


(2)Accordion控件的使用
      
      a )文件-新建-项目,在新建项目对话框中,新建一个ASP.NET AJAX-Enabled Web Project。
      

      b )在Default.aspx页面上,拖放一个ScriptManager控件(若不存在ScriptManager)。
      

      c )在页面中拖放一个Accordion。它会在页面的"源"中添加这么两句话。
      <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"%>      //用于注册该控件包

      //创建一个Accordion
      <cc1:Accordion ID="Accordion1" runat="server">
      </cc1:Accordion>


      d)在Accordion中添加Pane。在Accordion中先添加一个Panes标记。然后可以拖放一个AccordionPane到Panes中或者直接在Panes中添加AccordionPane。得如下代码:
None.gif        <cc1:Accordion ID="Accordion1" runat="server">
None.gif           
<Panes>
None.gif                
<cc1:AccordionPane ID="AccordionPane1" runat="server">
None.gif                   
<Header>ASP.NET AJAX</Header>
None.gif                   
<Content>
None.gif                       ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
None.gif                       学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
None.gif                       ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
None.gif                   
</Content>
None.gif                
</cc1:AccordionPane>
None.gif              
<cc1:AccordionPane ID="AccordionPane2" runat="server">
None.gif                   
<Header>Accordion</Header>
None.gif                   
<Content>
None.gif                    Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif                   Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif                    Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif                   
</Content>
None.gif                
</cc1:AccordionPane>
None.gif           
</Panes>
None.gif        
</cc1:Accordion>
   
      e )在Accordion中添加css样式,设定一些属性值。最终代码如下:
       
None.gif 1        <cc1:Accordion ID="Accordion1" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true" RequireOpenedPane="false" runat="server">
None.gif 
2            <Panes>
None.gif 
3                <cc1:AccordionPane ID="AccordionPane1" runat="server">
None.gif 
4                    <Header>ASP.NET AJAX</Header>
None.gif 
5                    <Content>
None.gif 
6                        ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
None.gif 
7                        学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
None.gif 
8                        ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
None.gif 
9                    </Content>
None.gif
10                </cc1:AccordionPane>
None.gif
11                <cc1:AccordionPane ID="AccordionPane2" runat="server">
None.gif
12                    <Header>Accordion</Header>
None.gif
13                    <Content>
None.gif
14                    Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif
15                    Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif
16                    Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
None.gif
17                    </Content>
None.gif
18                </cc1:AccordionPane>
None.gif
19            </Panes>
None.gif
20        </cc1:Accordion>

最终效果:

转载于:https://www.cnblogs.com/qc1984326/archive/2007/03/12/672320.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值