[转]ajax control toolkit 3.5 Accordion实例_se7en3

本文链接：https://blog.csdn.net/stoco/article/details/109663419

使用注意：

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)。

网页代码：

view plain copy to clipboard print ?

<%@ 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" mce_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>

<%@ Page Language="C#" 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" mce_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>

样式表

view plain copy to clipboard print ?

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;
}

转自 http://www.cnblogs.com/skyyang/archive/2008/10/24/1318572.html

我的实例

<asp:Accordion ID="hisListAccordion" runat="server" SelectedIndex="0"
             FadeTransitions="false" FramesPerSecond="40"
            TransitionDuration="250">
            <HeaderTemplate>
                <%# eval_r("hisTitle") %>
            </HeaderTemplate>
            <ContentTemplate>
                <%# eval_r("hisIntro") %>
            </ContentTemplate>
        </asp:Accordion>

.cs页面里

this.hisListAccordion.DataSource = biz.GetHistory();
this.hisListAccordion.DataBind();