wijsplitter ウィジェットのヘルプを使用して、プロフェッショナルで洗練された Web サイトを作成します。wijsplitter は、コンテナの表示領域を２つのサイズ変更可能なパネルに分割する移動および縮小可能なバーを備えたコンテナコントロールです。スプリッタは、無限にネストでき、Web インターフェース設計に無限の可能性を提供します。
単純なネストしない wijsplitter ウィジェットを作成するには、次のマークアップ（１つの wijsplitter と２つのパネルを作成）を、ウィジェットを表示する .cshtml ビューに追加します。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="splitter">
<div>パネル1</div>
<div>パネル2</div>
</div>
|
|
CSS スタイリングをスプリッタに多少追加することもできます。この例では、スプリッタの幅と高さを指定します。
| ソースビュー |
コードのコピー
|
|---|---|
<style type="text/css">
#splitter
{
height: 200px;
width: 200px;
}
</style>
|
|
ここで、ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml ファイルに追加できます。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#splitter").wijsplitter({ orientation: "vertical" });
});
</script>
|
|
向きプロパティを「vertical」に設定することに注意してください。プロジェクトを実行すると、２パネル構成のスプリッタコントロールにパネルが並べて表示されます。
関連項目：
wijsplitter の詳細については、Wijmo 製品マニュアルをご覧ください。
関連トピック