スプリッタの位置の設定

wijsplitter ウィジェットでは、SplitContainer の左端または上端からのスプリッタの位置（ピクセル）を指定できます。この機能を利用するには、単に splitterDistance オプションを設定します。

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

以下のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div class="splitterContainer"> <div class="layout"> <h3> 垂直方向</h3> <div id="vsplitter"> <div> パネル1 </div> <div> パネル2 </div> </div> </div> </div>

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力し、wijsplitter ウィジェットを初期化して splitterDistance オプションを設定します。 splitterDistance オプションのデフォルト値は 100 ですが、この例では 150 に設定します。<style> マークアップはスプリッタの高さと幅を設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ orientation: "vertical", splitterDistance: 200 }); }); </script> <style type="text/css"> .splitterContainer { height: 210px; } #vsplitter { width: 300px; height: 300px; } </style>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#vsplitter").wijsplitter({ orientation: "vertical", splitterDistance: 200 });
           
        });
    </script>
    <style type="text/css">
        .splitterContainer
        {
            height: 210px;
        }     
        #vsplitter
        {
            width: 300px;
            height: 300px;
        }
    </style>

［F5］を押して、アプリケーションを実行し、スプリッタを表示します。下の図は、splitterDistance を 100 に設定したスプリッタと splitterDistance を 200 に設定したスプリッタの相違を示します。