JavaScript からパネルを折りたたむ/展開する (C#)

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の CollapsiblePanel コントロールは、パネルを拡張し、その内容を折りたたんでもう一度展開する機能を提供します。 これら 2 つのアクションは、カスタム JavaScript コードからトリガーすることもできます。

概要

ASP.NET AJAX Control Toolkit の CollapsiblePanel コントロールは、パネルを拡張し、その内容を折りたたんでもう一度展開する機能を提供します。 これら 2 つのアクションは、カスタム JavaScript コードからトリガーすることもできます。

手順

まず、新しい ASP.NET ページを作成し、1 つの<form>要素内に をScriptManager含めます。 これにより、Control Toolkit で必要な ASP.NET AJAX ライブラリが読み込まれます。

<asp:ScriptManager ID="asm" runat="server" />

次に、折りたたみ/展開効果が表示されるように、テキストを含むパネルを作成します。

<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

ご覧のように、パネルはここに示されている CSS クラスを参照します (基本的には背景色とパネルの幅を定義します)。

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

コントロールには CollapsiblePanelExtender 属性が TargetControlID 必要です。これにより、ツールキットは、要求に応じて折りたたみまたは展開するパネルを認識します。

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

残念ながら、エクステンダーは現在、パネルを折りたたんだり拡張したりするための特定の API を公開していませんが、文書化されていないメソッドの中には、そうするものもあります。 まず、ページに 3 つの HTML ボタンを追加します。これにより、クライアント側の JavaScript がパネルの内容を折りたたんだり展開したりできます。

<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

クライアント側の JavaScript コード (で <script type="text/javascript">開始) では、 メソッドを $find() 使用して に CollapsiblePanelExtenderアクセスする必要があります。 $find("cpe") は、それに対する参照を返します。 そこから、特定の方法が目の前のタスクを解決します。

パネルを開く (展開する) メソッドを呼び出 _doOpen()します。次のコードは、最初のボタンが doOpen() クリックされたときに呼び出される関数を実装します。

function doOpen() 
{
 $find("cpe")._doOpen();
}

パネルを閉じたり折りたたんだりするには、 メソッドを _doClose() 実行する必要があります。 そのため、ユーザーが 2 番目のボタンをクリックすると、次の JavaScript コードが呼び出されます。

function doClose() 
{
 $find("cpe")._doClose();
}

3 番目のボタンは、パネルの状態を折りたたんだ状態から展開状態に切り替えます。また、その逆も切り替えます。 は CollapsiblePanelExtender 、パネルの状態を toggle() 反転させる メソッドを公開します。 ただし、別の方法もあります (メソッドによってtoggle()内部的に使用されます)。 の CollapsiblePanelExtender() メソッドはget_Collapsed()、パネルが折りたたまれているかどうかを示します。 この関数の戻り値に応じて、パネルは展開 (_doOpen() メソッド) または折りたたまれた (_doClose()) メソッドのいずれかになります。

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

3 つ目のボタンは、パネルの状態を折りたたんだ状態から展開後に変更します (フルサイズの画像を表示するには、ここをクリックします)。

次へ