Accordion控件一般用在内容比较多的页面上，功能类似于TAB选项卡，将一组功能相似任务相同的内容放在不同的选项卡下。然后通过选项卡的Header实现各组内容查看。
属性列表：
SelectedIndex：已伸展开的AccordionPane控件的索引号。
HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
ContentCssClass：用于显示内容的CSS类名。它也可以指定给Accordion 控件的ContentCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的ContentCssClass属性。
AutoSize: 设计控件中Panel的显示方式，主要有3种，即None（无限制的拉伸和收缩）,Limit（限制内容的高度）,Fill（内容高度与控件本身高度一样）。
FadeTransitions：为True时为渐变效果（在伸缩时颜色变淡，伸缩完后颜色恢复正常）,为false时是标准变换。
TransitionDuration：在选择某一标题后伸展和收缩过渡动画所持续的时间,单位为毫秒。
FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数。
AutoSize：用于限制Accordion控件展开的高度. AutoSize枚举类型取值在简介中已作过描述。
Panes：AccordionPane控件的集合。
HeaderTemplate：标题模版，其中包含的标记用于进行数据绑定来显示面版标题。
ContentTemplate：内容模版，其中包含的标记用于进行数据绑来显示面版内容。
DataSource：指定数据源，必须要调用DataBind()方法进行数据绑定。
DataSourceID：用数据源的ID来指定一个数据源。
DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。
1
实例解析一、实现静态导航菜单的实例（并页面无刷新）
2核心技术：
3界面无刷新
4OnItemCommand="Accordion1_ItemCommand"
5
61.前台UI
7<head runat="server">
8 <title>无标题页</title>
9 <style>
10 .header
11
{
12
background-color:gray;
13 height:25px;
14 widht:205px;
15 border-right:#99ccff thin solid;
16 border-top:#9ccff thin solid;
17 border-left:#9ccff thin solid;
18 border-botton:#9ccff thin solid;
19
}
20 .content
21 {
22 background-color:#ccccff;
23 height:30px;
24 width:205px;
25 }
26 </style>
27</head>
28<body>
29 <form id="form1" runat="server">
30 <div>
31 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
32 </div>
33 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
34 <ContentTemplate>
35 <asp:Label ID="lab" runat="server" Text=""></asp:Label>
36 <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand">
37 <Panes>
38 <cc1:AccordionPane ID="AccordionPane1" runat="server">
39 <Header><a href="">属性介绍一</a></Header>
40 <Content>
41 HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
42 </Content>
43 </cc1:AccordionPane>
44 </Panes>
45 <Panes>
46 <cc1:AccordionPane ID="AccordionPane2" runat="server">
47 <Header><a href="">属性介绍二</a></Header>
48 <Content>
49 DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。<br />
50 <asp:LinkButton ID="LinkButton1" runat="server" CommandName="link" CommandArgument="单击外部获得此数据">单击外部获得此数据</asp:LinkButton>
51 </Content>
52 </cc1:AccordionPane>
53 </Panes>
54 </cc1:Accordion>
55 </ContentTemplate>
56 </asp:UpdatePanel>
57 </form>
58</body>
59
602.后台
61 protected void Accordion1_ItemCommand(object sender, CommandEventArgs e)
62 {
63 lab.Text = e.CommandArgument.ToString();
64 }
65
66
67实例解析二、实现动态导航菜单的实例（并页面无刷新）
68核心技术：
69界面无刷新
70OnItemCommand="Accordion1_ItemCommand"
71SqlDataSource
72
73 <form id="form1" runat="server">
74 <div>
75 <asp:ScriptManager ID="ScriptManager1" runat="server">
76 </asp:ScriptManager>
77
78 </div>
79
80 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
81 <ContentTemplate>
82 <asp:Label ID="lab" runat="server" Text=""></asp:Label>
83 <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand" DataSourceID="SqlDataSource1">
84 <HeaderTemplate>
85 <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserName")%>'></asp:LinkButton>
86 </HeaderTemplate>
87 <ContentTemplate>
88 <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserAddress")%>'></asp:LinkButton>
89 </ContentTemplate>
90 </cc1:Accordion>
91 </ContentTemplate>
92 </asp:UpdatePanel>
93 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:db_04ConnectionString %>"
94 SelectCommand="SELECT [UserName], [UserAddress], [UserID] FROM [tb_Employee]"></asp:SqlDataSource>
95 </form>
96
97实例解析二、动态添加导航菜单项的实例
98核心技术：
99 AccordionPane pane = new AccordionPane();
100 
.
101 pane.HeaderContainer.Controls.Add(LinkButton..);
102 pane.ContentContainer.Controls.Add();
103 .
104 Accordion1.Panes.Add(pane);
105
106
107
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。