アコーディオン ペインを動的に追加する (VB)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit のアコーディオン コントロールには複数のペインが用意されており、ユーザーは一度に 1 つのペインを表示できます。 通常、パネルはページ自体内で宣言されますが、サーバー側のコードを使用して同じ結果を得ることができます。

概要

AJAX Control Toolkit のアコーディオン コントロールには複数のペインが用意されており、ユーザーは一度に 1 つのペインを表示できます。 通常、パネルはページ自体内で宣言されますが、サーバー側のコードを使用して同じ結果を得ることができます。

手順

アコーディオン コントロールは、すべての重要なプロパティをサーバー側のコードに公開します。 特に、Panes プロパティは、アコーディオンを構成するペインのコレクションへのアクセスを許可します。 すべてのペインの型は 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."))

最後に、ペインをアコーディオンの Panes コレクションに追加する必要があります。

acc1.Panes.Add(ap1)

アコーディオン コントロールに 2 つのペインを追加する、完全なサーバー側のコードを次に示します。

<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>

唯一不足している要素はアコーディオン自体で、これは 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>

この例を完了するために、アコーディオン コントロールで参照される 2 つの CSS クラスは、ブラウザーのスタイル情報を提供します。

<style type="text/css">
 .header {background-color: blue;}
 .content {border: solid;}
</style>

The data in the accordion was dynamically added by server-side code

アコーディオン内のデータは、サーバー側のコードによって動的に追加されました (クリックするとフルサイズの画像が表示されます)

前へ