wijexpander ウィジェットでは、さまざまなアニメーション効果を使用して、展開したパネル内の埋め込みや外部コンテンツを表示または非表示にできます。実行時にエキスパンダのヘッダーをクリックすると、展開したコンテンツを表示または非表示にできます。wijexpander ウィジェットは、jquery.wijmo.wijexpander.js ライブラリによって作成されます。
次の例のように、<h1> と <div> タグの組み合わせを使用して、コンテンツとヘッダーを作成できます。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="expander">
<h1>
ヘッダー
</h1>
<div>
コンテンツ
</div>
</div>
|
|
次のスクリプトを使用し、これらの DOM 要素構造体のいずれかを初期化できます。
| ソースビュー |
コードのコピー
|
|---|---|
<script type="text/javascript"> |
|
| ソースビュー |
コードのコピー
|
|---|---|
$(document).ready(function() {
$("#expander").wijexpander();
});
</script>
|
|
プロジェクトを実行すると、エキスパンダはデフォルトの縮小位置になります。
その展開位置では、このような表示になります。
関連項目：
wijexpander の詳細については、Wijmo 製品マニュアルをご覧ください。
関連トピック