ajax control toolkit 3.5 Accordion实例

使用注意：

1,Accordion和Panes,AccordionPane配合使用

2,AccordionPane放在Panes里

先介绍一下属性：

Accordion的属性：
　　　　CssClass：Accordion的样式
            SelectedIndex：要展开的面板的索引号。如果设为-1的话，那会收缩所有的面板。
            HeaderCssClass：标题的样式表名称。
            ContentCssClass：内容的样式表名称。
            FadeTransitions：是否出现淡入淡出效果。true-淡入淡出;false-无。
            TrasitionDuration：淡入淡出效果的时间长度。默认250毫秒。
            FramesPerScond：淡入淡出时每秒种的帧数。默认30帧。
            RequireOpenedPane：是否有一个可折叠面板处理展开状态。
            HeaderTemplate：数据绑定时，必须使用这个属性来设定标题模板。
            ContentTemplate：数据绑定时，必须使用这个属性来设定内容模板。
            DataSource：指定数据源。
            DataSourceID：所欲使用的数据源的ID属性。
            DataMemeber：欲绑定的数据成员。
            AutoSize：自动调整大小的模式(None,Limit,Fill)。

网页代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qq.aspx.cs" Inherits="web_qq" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link rel="Stylesheet" href="qq.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:Accordion ID="Accordion1" CssClass="sidebar" HeaderCssClass="header" ContentCssClass="content" runat="server" FramesPerSecond="15" FadeTransitions="true" TransitionDuration="500" Width="220" SelectedIndex="0">
        <Panes>
            <cc1:AccordionPane  HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane1" runat="server">
            <Header>标题：爱上你是一个错</Header>
            <Content>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            </Content>
            </cc1:AccordionPane >
            <cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected"  ID="AccordionPane2" runat="server">
            <Header>标题：爱上你是一个错</Header>
            <Content>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            </Content>
            </cc1:AccordionPane >
            <cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected"  ID="AccordionPane3" runat="server">
            <Header>标题：爱上你是一个错</Header>
            <Content>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            </Content>
            </cc1:AccordionPane >
            <cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected"  ID="AccordionPane4" runat="server">
            <Header>标题：爱上你是一个错</Header>
            <Content>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            爱上你是一个错<br>
            </Content>
            </cc1:AccordionPane >
        </Panes>
        </cc1:Accordion>

    </div>
    </form>
</body>
</html>

样式表

body
{
    background-color:#efefef;
    font-size:12px;
    margin-bottom:0px;
    margin-top:0px;
    line-height:18px;
}
#form1
{
    margin:0px auto;
}
.sidebar
{
    background-color:#FFF;
}
.sidebar .header
{
    font-weight:bold;
    background-color:#2e4d7b;
    line-height:25px;
    color:#FFF;
    padding-left:8PX;
    padding-right:8PX;
    cursor:pointer;
    border:1px solid #000;
    margin-top:5px;
}
.sidebar .accordionHeaderSelected
{
    font-weight:bold;
    background-color:#000;
    line-height:25px;
    color:#FFF;
    padding-left:8PX;
    padding-right:8PX;
    cursor:pointer;
    border:1px solid #000;
    margin-top:5px;
}
.sidebar .content
{
padding-left:8px;
padding-right:8px;
border:dashed 1px #000;
}