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"><br /> <div><br /> <asp:ScriptManager ID="ScriptManager1" runat="server"><br /> </asp:ScriptManager><br /> <cc1:Accordion ID="Accordion1" runat="server" Height="329px" Width="198px"<br /> HeaderCssClass ="accordionHeader"<br /> ContentCssClass ="accordionContent"<br /> FadeTransitions ="true"<br /> TransitionDuration ="300"<br /> FramesPerSecond ="20"<br /> RequireOpenedPane ="false"<br /> SelectedIndex ="-1"<br /> ><br /> <Panes><br /> <cc1:AccordionPane runat ="server"><br /> <Header>張佳佳</Header><br />　　　　　<Content>態度決定一切</Content><br /> </cc1:AccordionPane><br /> <cc1:AccordionPane ID="AccordionPane1" runat ="server"><br /> <Header>＊佳佳＊</Header><br />　　　　　<Content>太陽像往常一樣升了起來</Content><br /> </cc1:AccordionPane><br /> <cc1:AccordionPane ID="AccordionPane2" runat ="server"><br /> <Header>i++</Header><br />　　　　　<Content>做好自己該做的!</Content><br /> </cc1:AccordionPane><br /> <cc1:AccordionPane ID="AccordionPane3" runat ="server"><br /> <Header>傻妞</Header><br />　　　　　<Content>如果有一天，我們都不會說話了，希望我們依然能住在愛的天堂裡</Content><br /> </cc1:AccordionPane><br /> </Panes><br /> </cc1:Accordion><br /> </div></p><p> </form>

 

動態載入（從資料庫中查詢資料載入）

頁面代碼：

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

 

後台代碼：

protected void Page_Load(object sender, EventArgs e)<br /> {<br /> if (!Page.IsPostBack)<br /> {<br /> Display(); //顯示學生資訊<br /> }<br /> }</p><p> private void Display()<br /> {<br /> //得到所有學生的資訊<br /> List<Student> list = GetAllStudent();</p><p> //迴圈將學生ID添加到Accordion控制項的標題中<br /> foreach (Student item in list)<br /> {<br /> AccordionPane ap = new AccordionPane(); //執行個體化一個AccordionPane 控制項<br /> Label lblStudentMenu = new Label(); //執行個體化一個標籤控制項用來顯示分類名<br /> lblStudentMenu.Text = item.Id.ToString();//指定標籤的Text屬性為分類名<br /> ap.HeaderContainer.Controls.Add(lblStudentMenu); //將標籤控制項添加到AccordionPane標題部分</p><p> HyperLink hlinkStudentMenu = new HyperLink();<br /> hlinkStudentMenu.Text = "   " +item.Name + "<br>";//指定HyperLink的Text屬性為學生姓名<br /> hlinkStudentMenu.NavigateUrl = "#"; //指定串連屬性<br /> ap.ContentContainer.Controls.Add(hlinkStudentMenu);//將串連控制項添加到AccordionPane內容部分</p><p> Accordion1.Panes.Add(ap);//將AccordionPane追加到Accordion的Panes集合中<br /> }</p><p> }