以動態方式新增一個 Accordion 窗格 (VB)
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格,並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告,但可使用伺服器端程式碼來達到相同的結果。
概觀
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格,並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告,但可使用伺服器端程式碼來達到相同的結果。
步驟
Accordion 控制項會將所有重要的屬性公開給伺服器端程式碼。 除此之外,Panes
屬性會將存取權授與組成 Accordion 的窗格集合。 每個窗格都有類型 AccordionPane
。 因此,建立這樣的窗格是微不足道的:
Dim ap1 As New AccordionPane()
AccordionPane
的 HeaderContainer
屬性可讓您存取窗格標頭區段內的 ASP.NET 控制項;AccordionPane
的 ContentContainer
屬性會針對窗格的內容區段執行相同的動作。 這可讓 ASP.NET 程式碼將內容新增至窗格:
ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
最後,必須將窗格新增至 Accordion 的 Panes
集合:
acc1.Panes.Add(ap1)
以下是將兩個窗格新增至 Accordion 控制項的完整伺服器端程式碼:
<script runat="server">
Sub Page_Load()
If Not Page.IsPostBack Then
Dim ap1 As New AccordionPane()
ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
Dim ap2 As New AccordionPane()
ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
acc1.Panes.Add(ap1)
acc1.Panes.Add(ap2)
End If
End Sub
</script>
唯一遺漏的元素是 Accordion 本身,這取決於 ASP.NET ScriptManager
控制項的存在:
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content" Width="300px" FadeTransitions="true">
</ajaxToolkit:Accordion>
</div>
</form>
若要完成範例,Accordion 控制項中所參考的兩個 CSS 類別會提供瀏覽器樣式資訊:
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Accordion 中的資料是由伺服器端程式碼動態新增 (點按以檢視完整大小的影像)