拡張方向の変更

wijexpander ウィジェットでは、ユーザーは上、下、左、または右からペインのコンテンツを拡張できます。この機能を利用するには、単に expandDirection オプションを設定します。例については、Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/expander/ExpandDirection）にアクセスし、MVC コントロールエクスプローラの Expander > ExpandDirection サンプルのライブデモをご覧ください。

拡張方向を設定するには、以下の手順を実行します。

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

以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div id="expander"> <h3>ヘッダー</h3> <div> Vestibulum ut eros non enim commodo hendrerit.Donec porttitor tellus non magna.Nam ligula elit, pretium et, rutrum non, hendrerit id, ante.Nunc mauris sapien, cursus in. </div> </div>

ソースビュー

コードのコピー

<div id="expander">
<h3>ヘッダー</h3>
<div>
Vestibulum ut eros non enim commodo hendrerit.Donec porttitor tellus non magna.Nam ligula elit, pretium et, rutrum non, hendrerit id, ante.Nunc mauris sapien, cursus in.
</div>
</div>

このマークアップは、１つのエクスパンダウィジェットのコンテンツをページに追加します。次の手順では、エクスパンダの拡張方向を設定します。

前の手順で追加した </div>終了タグの後に、以下の jQuery スクリプトを入力し、wijexpander ウィジェットを初期化して expandDirection オプションを設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#expander").wijexpander({ expandDirection: "top" }); }); </script> <div style="clear:both;float:none;"> </div> <div> <label for="selEasing2">Easing:</label> </div> <select id="expandDirection" onchange="applyOptions()" onclick="applyOptions()"> <option value="top" selected="selected">上</option> <option value="right">右</option> <option value="bottom">下</option> <option value="left">左</option> </select> <script type="text/javascript" language="javascript"> function applyOptions() { $("#expander").wijexpander("option", "expandDirection", $("#expandDirection").get(0).value); } </script>

ソースビュー

コードのコピー

   <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#expander").wijexpander({ expandDirection:
"top" });
        });
        </script>
<div style="clear:both;float:none;">
 </div>
<div>
<label for="selEasing2">Easing:</label>
</div>
<select id="expandDirection" onchange="applyOptions()" onclick="applyOptions()">
<option value="top" selected="selected">上</option>
<option value="right">右</option>
<option value="bottom">下</option>
<option value="left">左</option>
</select>
<script type="text/javascript" language="javascript">
    function applyOptions() {
        $("#expander").wijexpander("option", "expandDirection", $("#expandDirection").get(0).value);
    }
</script>

これにより、４つの値を持つドロップダウンボックスが追加されます。実行時に、ドロップダウンボックスから方向を選択し、wijexpander ウィジェットの拡張方向を変更します。

このトピックの作業結果

[F5］を押してアプリケーションを実行し、ドロップダウンボックスから方向を選択します。それに応じて、wijexpander ウィジェットの拡張方向が変わります。