使用CollapsiblePanelExtender实现展开和收缩效果以及Accordion控件

 

一般网页上的展开和收缩效果都要用到js代码，实现起来比较麻烦，现在有一种方法不用写一句js代码，就能实现绚丽的展开和收缩效果。那就是使用CollapsiblePanelExtender控件，该空间属于微软的atlas，下载地址

http://atlas.asp.net/default.aspx?tabid=47&subtabid=471

首先要在页面上至少添加两个panel，第一个panel用来放标题，第二个panel用来放内容，当鼠标点击第一个panel时，就能控制第一个panel的展开和收缩，最基本的代码如下：

        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server">
            <cc1:CollapsiblePanelProperties
            CollapseControlID="Panel1"
            ExpandControlID="Panel1"
            TargetControlID="Panel2" /> 
        </cc1:CollapsiblePanelExtender>

属性TargetControlID指的被控制的panel，这里为panel2

属性ExpandControlID指的是控制展开的panel，这里为panel1，就是说点击panel1时会展开panel2

属性CollapseControlID指的时控制收缩的panel，这里是panel1。

这三个是最基本也是最常用的属性，还有很多其它属性，灵活使用这些属性可实现很多很炫的功能，下面就简单介绍一下其它属性。

TargetControlID：被控制的panel

CollapsedSize：目标收缩后的大小

ExpandedSize：目标展开后的大小

Collapsed：true时为展开，false时为收缩

Scroll Contents:值为true时，且目标panel的大小小于内容的大小时自动添加滚动条。

ExpandControlID/CollapseControlID：点击这些控件会展开或收缩目标panel。

TextLabelID：指示一个label控件的ID，该label的值会根据目标panel的状态而改变。

CollapsedText：设置当目标panel为收缩时TextLabelID所指示的lable的值。

ExpandedText：设置当目标panel为展开时TextLabelID所指示的lable的值。

ImageControlID：指示一个image控件。该控件会根据目标panel状态的不同而改变图片。

CollapsedImage：指示目标panel为收缩时ImageControlID所指示的image的path。

ExpandedImage：指示目标panel为展开时ImageControlID所指示的image的path。

ExpandDirection：指示目标panel的展开收缩方向，可以是水平或垂直展开收缩。

例：

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="lbDownTools"
                            TargetControlID="plDownTools" ExpandControlID="lbDownTools" Collapsed="true"
                            SuppressPostBack="true">
                        </cc1:CollapsiblePanelExtender>
                        <li>
                            <asp:LinkButton ID="lbDownTools" runat="server">Weka工具与文档下载</asp:LinkButton>
                        </li>
                        <asp:Panel ID="plDownTools" runat="server">
                            <ul>
                                <li><a href="tools\weka\weka-3-6-2jre.rar">Weka工具下载</a></li>
                                <li><a href="tools\weka\Weka - Tutorial.rar">Weka帮助与教程</a></li>
                                <li><a href="tools\weka\数据预处理参考资料.rar">数据预处理参考资料</a></li>
                            </ul>
                        </asp:Panel>

 

Accordion控件

如果你的网站的用户群体是极具网络消费能力和好奇心的青少年的话，那么你一定要注意一下这个控件。因为我们利用它可以实现QQ的那种折叠功能。这种折叠不仅仅是能够节省空间那么简单，更重要的是：新颖、而且完全符合QQ用户群体的操作习惯。能够让青少年感到操作的亲切和方便，从而提高用户的体验度。好处就说到这里，下面先列出它的属性参数： SelectedIndex - The AccordionPane to be initially visible 【默认展开的Panes的索引】 HeaderCssClass - Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes头部的样式表】 ContentCssClass - Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes内容的样式表】 FadeTransitions - True to use the fading transition effect, false for standard transitions.【是否允许透明过渡效果】 TransitionDuration - Number of milliseconds to animate the transitions【透明过渡动画的延时（单位毫秒）】 FramesPerSecond - Number of frames per second used in the transition animations【Panes切换动画的延时】 AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above【自适用尺寸类型】 Panes - Collection of AccordionPane controls【AccordionPane里面包含的Panes】 HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding【头模板】 ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding【内容模板】 DataSource - The data source to use. DataBind() must be called.【如果绑定数据源的话，这里是数据源】 DataSourceID - The ID of the data source to use.【数据源ID】 DataMember - The member to bind to when using a DataSourceID【数据成员】 ajax控件有点特殊，它和其他的不同，它没有目标控件，它不依附于其他原有的服务器端控件，它更像是一种独立的全新的控件。但是Accordion必须配合AccordionPane使用，因为AccordionPane才是用来呈现内容的容器。 Accordion里面是Panes，Panes里面放N个AccordionPane，每个AccordionPane里面包含Header部分和Content部分。提供的三个cssClass属性，通过设置就可以随心的达到效果。模拟一下QQ，见左图。 Accordion的属性： SelectedIndex：要展开的面板的索引号。如果设为-1的话，那会收缩所有的面板。设定页面初始导入时显示的Pane。        FadeTransitions：是否出现淡入淡出效果。true-淡入淡出;false-无。       HeaderTemplate：数据绑定时，必须使用这个属性来设定标题模板。        ContentTemplate：数据绑定时，必须使用这个属性来设定内容模板。        TrasitionDuration：淡入淡出效果的时间长度。默认250毫秒。        FramesPerScond：淡入淡出时每秒种的帧数。默认30帧。        RequireOpenedPane：是否有一个可折叠面板处理展开状态。        AutoSize：自动调整大小的模式(None,Limit,Fill)。        DataSourceID：所欲使用的数据源的ID属性。        HeaderCssClass：标题的样式表名称。        ContentCssClass：内容的样式表名称。        DataMemeber：欲绑定的数据成员。        DataSource：指定数据源。   例： <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true"                                 TransitionDuration="250">                                 <Panes>                                     <cc1:AccordionPane ID="AccordionPane1" runat="server">                                         <Header>                                             <asp:LinkButton ID="LinkButton1" Font-Underline="False" Font-Overline="True">Microsoft Visual Studio 2008</asp:LinkButton>                                         </Header>                                         <Content>                                             <ul style="line-height: 25px;">                                                 <li><a href="tools\vs2008\Visual Studio 2008(En).rar">VS2008编程工具(英文)</a> </li>                                                 <li><a href="tools\vs2008\MSDN(En).rar">MSDN帮助文档(英文)</a> </li>                                                 <li><a href="tools\vs2008\VS2008-SP1 ENUX1512962.rar">VS2008补丁SP1(英文)</a> </li>                                                 <br />                                                 <li><a href="tools\vs2008\Visual Studio 2008(CH).rar">VS2008编程工具(中文)</a> </li>                                                 <li><a href="tools\vs2008\MSDN(Ch).rar">MSDN帮助文档(中文)</a> </li>                                                 <li><a href="tools\vs2008\VS2008-SP1 CHSX1512981.rar">VS2008补丁SP1(中文)</a> </li>                                                 <br />                                                 <li><a href="tools\vs2008\Assist插件的安装与配置.rar">Assist插件工具</a> </li>                                                 <li><a href="tools\vs2008\AJAX的安装与配置.rar">AJAX插件工具</a> </li>                                             </ul>                                         </Content>                                     </cc1:AccordionPane>                                     <cc1:AccordionPane ID="AccordionPane2" runat="server">                                         <Header>                                             <asp:LinkButton ID="LinkButton2">SQL 2005管理工具</asp:LinkButton>                                         </Header>                                         <Content>                                             <ul style="line-height: 25px;">                                                 <li><a href="tools\sql2005\SQLServer2005_SSMSEE(XP).msi">SQL 2005 Management Studio                                                     (XP)</a> </li>                                                 <li><a href="tools\sql2005\SQLServer2005_SSMSEE(Win7).msi">SQL 2005 Management Studio                                                     (Win7)</a> </li>                                             </ul>                                         </Content>                                     </cc1:AccordionPane>                                     <cc1:AccordionPane ID="AccordionPane3" runat="server">                                         <Header>                                             <asp:LinkButton ID="LinkButton3">MySQL数据库</asp:LinkButton>                                         </Header>                                         <Content>                                             <ul style="line-height: 25px;">                                                 <li><a href="tools\mysql\mysql-5.1.36-win32.msi">MySQL-5.1.36-win32.msi</a> </li>                                                 <li><a href="tools\mysql\mysql-gui-tools-5.0-r17-win32.msi">MySQL-GUI-Tools-5.0-r17-win32.msi</a>                                                 </li>                                                 <br />                                                 <li><a href="tools\mysql\mysql-connector-net-6.2.2(XP).zip">MySQL-Connector-net-6.2.2.zip                                                     (XP)</a> </li>                                                 <li><a href="tools\mysql\mysql-connector-net-6.3.1(win7).zip">MySQL-Connector-net-6.3.1.zip                                                     (Win7)</a> </li>                                                 <br />                                                 <li><a href="tools\mysql\MySQLDriverCS-n-EasyQueryTools-4.0.1-DotNet2.0.exe">MySQLDriverCS驱动程序(C#)</a>                                                 </li>                                             </ul>                                         </Content>                                     </cc1:AccordionPane>