AJAX扩展控件Accordion的使用方法总结

如上图所示为Accordion控件：

感觉不错的样式

<style type="text/css">
.headerBg{cursor:hand;text-align:center;width:180px;height:21px;background-image:url(images/ajaxmenubg1.gif);FONT-SIZE: 12px;line-height:21px;}
.contentBg{width:180px;text-align:left;BACKGROUND-COLOR: #D1ECC8; FONT-SIZE: 12px; Font-color: #669900; FONT-FAMILY: "宋体"}
</style>
</head>

一、静态加载：

页面代码如下：

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" Height="329px" Width="198px"
HeaderCssClass ="accordionHeader"
ContentCssClass ="accordionContent"
FadeTransitions ="true"
TransitionDuration ="300"
FramesPerSecond ="20"
RequireOpenedPane ="false"
SelectedIndex ="-1"
>
<Panes>
<cc1:AccordionPane runat ="server">
<Header>张佳佳</Header>
　　　　　<Content>态度决定一切</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane1" runat ="server">
<Header>＊佳佳＊</Header>
　　　　　<Content>太阳像往常一样升了起来</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat ="server">
<Header>i++</Header>
　　　　　<Content>做好自己该做的!</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat ="server">
<Header>傻妞</Header>
　　　　　<Content>如果有一天，我们都不会说话了，希望我们依然能住在爱的天堂里</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>

</form>

动态加载（从数据库中查询数据加载）

页面代码：

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<cc1:Accordion ID="Accordion1" runat="server" Height="382px" Width="200px" HeaderCssClass="headerBg" ContentCssClass="contentBg">
</cc1:Accordion>
</div>
</form>

后台代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Display(); //显示学生信息
}
}

private void Display()
{
//得到所有学生的信息
List<Student> list = GetAllStudent();

//循环将学生ID添加到Accordion控件的标题中
foreach (Student item in list)
{
AccordionPane ap = new AccordionPane(); //实例化一个AccordionPane 控件
Label lblStudentMenu = new Label(); //实例化一个标签控件用来显示分类名
lblStudentMenu.Text = item.Id.ToString();//指定标签的Text属性为分类名
ap.HeaderContainer.Controls.Add(lblStudentMenu); //将标签控件添加到AccordionPane标题部分

HyperLink hlinkStudentMenu = new HyperLink();
hlinkStudentMenu.Text = "   " +item.Name + "<br>";//指定HyperLink的Text属性为学生姓名
hlinkStudentMenu.NavigateUrl = "#"; //指定连接属性
ap.ContentContainer.Controls.Add(hlinkStudentMenu);//将连接控件添加到AccordionPane内容部分

Accordion1.Panes.Add(ap);//将AccordionPane追加到Accordion的Panes集合中
}

}