水平または垂直スプリッタの作成

wijsplitter ウィジェットでは、スプリッタの向きを変更できます。この機能を利用するには、単に orientation オプションを設定します。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/splitter/Nested）にアクセスし、MVC コントロールエクスプローラの Splitter > Nested サンプルのライブデモをご覧ください。

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。

以下のマークアップをページの <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 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>

ソースビュー

コードのコピー

<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>

［F5］を押して、アプリケーションを実行し、垂直および水平スプリッタを表示します。