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。得如下代码：
        <cc1:Accordion ID="Accordion1" runat="server">
           <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                   <Header>ASP.NET AJAX</Header>
                   <Content>
                       ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　ASP.NET AJAX　学习
                       学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习
                       ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习
                   </Content>
                </cc1:AccordionPane>
              <cc1:AccordionPane ID="AccordionPane2" runat="server">
                   <Header>Accordion</Header>
                   <Content>
                    Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
                   Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
                    Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
                   </Content>
                </cc1:AccordionPane>
           </Panes>
        </cc1:Accordion>
   
      e )在Accordion中添加css样式，设定一些属性值。最终代码如下：
       
 1        <cc1:Accordion ID="Accordion1" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true" RequireOpenedPane="false" runat="server">
 2            <Panes>
 3                <cc1:AccordionPane ID="AccordionPane1" runat="server">
 4                    <Header>ASP.NET AJAX</Header>
 5                    <Content>
 6                        ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　ASP.NET AJAX　学习
 7                        学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习
 8                        ASP.NET AJAX　学习ASP.NET AJAX　学习ASP.NET AJAX　学习
 9                    </Content>
10                </cc1:AccordionPane>
11                <cc1:AccordionPane ID="AccordionPane2" runat="server">
12                    <Header>Accordion</Header>
13                    <Content>
14                    Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
15                    Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
16                    Accordion　学习Accordion　学习Accordion　学习Accordion　学习Accordion　学习
17                    </Content>
18                </cc1:AccordionPane>
19            </Panes>
20        </cc1:Accordion>

最终效果：
posted @ 2007-03-12 19:36 潮儿 阅读(1225) 评论(8)  编辑 收藏 网摘 所属分类: Asp.Net AJAX

  回复  引用  查看    
#1楼2007-03-20 09:29 | 胡敏      
提个小建议:
你这个学习笔记实用性不大.
在实际开发中,我们都要运用到数据库,所以应该多考虑如何运用数据库.
如:如何连接数据库,如何绑定数据..控件的应用关键是在 <Header></Header>,<Content></Content>里面。
当然初步学习已经不错了。。
一家之言..仅供参考。


  回复  引用  查看    
#2楼[楼主]2007-03-20 21:17 | 潮儿      
@胡敏
谢谢你提的宝贵意见！
我刚开始学这个不久，这个笔记的主要作用是了解这些控件的主要作用。对使用的过程进行一些总结。

关于你提的关于数据库的内容，我会加紧去学习的。
  回复  引用    
#3楼2007-03-21 13:13 | Ju[未注册用户]
请问，如何把你测试的Accordion项目 （没有数据库也行），正确的 部署在虚拟主机上（不是本地的机子）。
  回复  引用    
#4楼2007-03-21 13:14 | Nov99[未注册用户]
我部署了不行，测试老是通不过，
麻烦你不吝赐教
  回复  引用    
#5楼2007-03-21 13:15 | nov99[未注册用户]
忘了。留下QQ了，
312538337
希望知道的朋友能告诉我，，
  回复  引用  查看    
#6楼[楼主]2007-03-21 16:01 | 潮儿      
@Ju
关于部署到虚拟主机，我还未做过。
现在也不好乱说，等我成功部署后，会留言的。
你可以看看这个：http://www.cnblogs.com/ddr888/archive/2006/12/21/599386.html">http://www.cnblogs.com/ddr888/archive/2006/12/21/599386.html
和http://www.cnblogs.com/JeffreyZhao/archive/2006/10/23/Deploy_ASP_NET_AJAX_Assembly_in_Virtual_Web_Host.html
  回复  引用  查看    
#7楼[楼主]2007-03-21 16:02 | 潮儿      
@nov99
你是在本机上测试吗？？
是什么错误？
  回复  引用    
#8楼2008-05-22 13:37 | super_xing[未注册用户]
问一下：为什么我那个Accordion里没有 RequireOpenedPane和SuppressHeaderPostBacks属性啊？是版本的问题吗？你用的是哪个版本？谢谢！



发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 672320




相关文章:

相关链接: