マークアップとスクリプティング

２つのパネルから成るネストしていない単純な wijsplitter ウィジェットの HTML マークアップは、次のようになります。

マークアップ	コードのコピー
<div id="splitter"> <div>Panel1</div> <div>Panel2</div> </div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#splitter").wijsplitter({ orientation: "horizontal" }); }); </script>

ページのヘッドセクションで、スプリッタに CSS スタイル指定を追加することもできます。この例では、スプリッタの幅と高さを指定します。

スタイル	コードのコピー
<style type="text/css"> #splitter { height: 200px; width: 200px; } </style>

ここで説明しているマークアップとスクリプトの結果は次のようになります。２つのパネルが上下に配置されるように、orientation プロパティを "horizontal" に設定しています。エキスパンダボタンをクリックすると、Panel2 がいっぱいに開きます。スプリッタバーをクリックして上下にドラッグすると、パネルのサイズを変更できます。

関連トピック

参照