サブメニューの位置の変更

メニューとサブメニューが開く場所をトリガーに相対的に指定できます。このチュートリアルでは、ボタンクリックを使用して、メニューを開き、position オプションをトリガーします。MVC コントロールエクスプローラのライブデモで Menu > Position サンプル（http://demo.componentone.com/ASPNET/MVCExplorer/menu/Position）を参照してください。

以下の手順を実行します。

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

次のマークアップを _Layout.cshtml ファイルに追加して、ボタンとリストを追加します。

ソースビュー	コードのコピー
<h2>位置</h2> <div class="main demo"> < !-- デモマークアップの開始 --> <button id="btn1"> ここをクリック</button> <ul id="wijmenu1"> <li><a href="#">新着</a></li> <li><a href="#">エンタメ</a></li> <li><a href="#">金融</a></li> <li><a href="#">スポーツ</a></li> <li><a href="#">生活</a> <ul><li><a href="#">サブメニュー</a></li></ul> </li> <li><a href="#">ニュース</a></li> <li><a href="#">政治</a></li> <li><a href="#">スポーツ</a></li> </ul> < !-- デモマークアップの終了 --> <div class="demo-options"> < !-- オプションマークアップの開始 --> <div class="option-row"> <label My</label> <select id="my1"> <option value="left">左</option> <option value="center">中央</option> <option value="right">右</option> </select> <select id="my2"> <option value="top">上</option> <option value="center">中央</option> <option value="bottom">下</option> </select> </div> <div class="option-row"> <label> At</label> <select id="at1"> <option value="left">左</option> <option value="center">中央</option> <option value="right">右</option> </select> <select id="at2"> <option value="top">上</option> <option value="center">中央</option> <option value="bottom" selected="selected">下</option> </select> </div> < !-- オプションマークアップの終了 --> </div> </div>

ソースビュー

コードのコピー

<h2>位置</h2>
<div class="main demo">
            < !-- デモマークアップの開始 -->
            <button id="btn1">
                ここをクリック</button>
            <ul id="wijmenu1">
                <li><a href="#">新着</a></li>
                <li><a href="#">エンタメ</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">スポーツ</a></li>
                <li><a href="#">生活</a>
                    <ul><li><a href="#">サブメニュー</a></li></ul>
                </li>
                <li><a href="#">ニュース</a></li>
                <li><a href="#">政治</a></li>
                <li><a href="#">スポーツ</a></li>
            </ul>
            < !-- デモマークアップの終了 -->
            <div class="demo-options">
                < !-- オプションマークアップの開始 -->
                <div class="option-row">
                    <label
                        My</label>
                    <select id="my1">
                        <option value="left">左</option>
                        <option value="center">中央</option>
                        <option value="right">右</option>
                    </select>
                    <select id="my2">
                        <option value="top">上</option>
                        <option value="center">中央</option>
                        <option value="bottom">下</option>
                    </select>
                </div>
                <div class="option-row">
                    <label>
                        At</label>
                    <select id="at1">
                        <option value="left">左</option>
                        <option value="center">中央</option>
                        <option value="right">右</option>
                    </select>
                    <select id="at2">
                        <option value="top">上</option>
                        <option value="center">中央</option>
                        <option value="bottom" selected="selected">下</option>
                    </select>
                </div>
                < !-- オプションマークアップの終了 -->
            </div>
        </div>

次のスクリプトを追加して、ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#wijmenu1").wijmenu({ orientation: 'vertical', trigger: "#btn1" }); $("#my1,#my2,#at1,#at2").change(function () { $("#wijmenu1").wijmenu("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value }); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
        $(document).ready(function () {
            $("#wijmenu1").wijmenu({
                orientation: 'vertical',
                trigger: "#btn1"
            });
            $("#my1,#my2,#at1,#at2").change(function () {
                $("#wijmenu1").wijmenu("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value });
            });
        });
    </script>

アプリケーションを実行します。アプリケーションは、次の図のようになります。