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集合中 } }