在 VB) 動態新增 [一般] 窗格 (

作者 ：一個是一個

下載 PDF

AJAX 控制項工具組中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但伺服器端程式碼可用來達成相同的結果。

概觀

AJAX 控制項工具組中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但伺服器端程式碼可用來達成相同的結果。

步驟

Accordion 控制項會將所有重要屬性公開至伺服器端程式碼。 此外，屬性會 Panes 授與組成 Accordion 之窗格集合的存取權。 每個窗格都有 類型 AccordionPane 。 因此，建立這類窗格十分簡單：

Dim ap1 As New AccordionPane()

的 HeaderContainerAccordionPane 屬性可讓您存取窗格標頭區段中的 ASP.NET 控制項; ContentContainer 的 屬性 AccordionPane 會針對窗格的內容區段執行相同的動作。 這可讓 ASP.NET 程式碼將內容新增至窗格：

ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))

最後，必須將窗格 () 新增至 Panes Accordion 的集合：

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>

在伺服器端程式碼 (按一下以檢視完整大小的影像)

[上一步]