MVC Classic ウィジェット > Wijsplitter > 水平または垂直スプリッタの作成 |
wijsplitter ウィジェットでは、スプリッタの向きを変更できます。 この機能を利用するには、単に orientation オプションを設定します。 Web サイト(http://demo.componentone.com/ASPNET/MVCExplorer/splitter/Nested)にアクセスし、MVC コントロールエクスプローラの Splitter > Nested サンプルのライブデモをご覧ください。
<body>
タグ内に追加します。
ソースビュー |
コードのコピー
|
---|---|
<div class="main demo"> <!-- デモマークアップの開始 --> <div id="vsplitter"> <div> パネル1 </div> <div> <div id="hsplitter"> <div> パネル2</div> <div> パネル3</div> </div> </div> </div> </div> <!-- デモマークアップの終了 --> |
</div>
の後に、以下の jQuery スクリプトを入力し、wijsplitter ウィジェットを初期化して orientation オプションを設定します。 <style>
マークアップでは、垂直スプリッタの高さと幅を設定します。
ソースビュー |
コードのコピー
|
---|---|
<style type="text/css"> #vsplitter { width: 300px; height: 200px; } </style> <script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ orientation: "vertical", fullSplit: false, expanded: function (e) { $("#hsplitter").wijsplitter("refresh"); }, collapsed: function (e) { $("#hsplitter").wijsplitter("refresh"); }, sized: function (e) { $("#hsplitter").wijsplitter("refresh"); } }); $("#hsplitter").wijsplitter({ orientation: "horizontal", fullSplit: true }); }); </script> |