ComponentOne Studio MVC5 Classic ヘルプ
Wijmenu でのカスタムアイコンの使用
MVC Classic ウィジェット > Wijmenu > Wijmenu でのカスタムアイコンの使用

wijmenu ウィジェットは、メニューでのカスタムアイコンの使用をサポートします。アイコンを wijmenu ウィジェットに適用するには、特別のマークアップを使用します。MVC コントロールエクスプローラのライブデモで Menu > Icon サンプル（http://demo.componentone.com/ASPNET/MVCExplorer/menu/Icon）を参照してください。

カスタムアイコンを含むメニューを作成するには、以下の手順を実行します。

  1. ASP.NET MVC Wijmo アプリケーションを作成します。
  2. ソリューションエクスプローラで、Views → Shared フォルダをクリックし、_Layout.cshtml をダブルクリックしてファイルを開きます。
  3. ソリューションエクスプローラで、Views → Home フォルダをクリックし、Index.cshtml をダブルクリックしてファイルを開きます。
  4. 次のマークアップを Index.cshtml ビューに挿入して、サブメニューを含む順序付けられていないリストを作成します。
    ソースビュー
    コードのコピー 
    <ul id="menu1">
                <li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">
                    メニュー1</span></a></li>
                <li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">
                    メニュー2</span></a>
                    <ul>
                        <li><a>サブメニュー1</a></li>
                        <li><a>サブメニュー2</a>
                            <ul>
                                <li><a>サブメニュー2.1</a></li>
                                <li><a>サブメニュー2.2</a></li
                                <li><a>サブメニュー2.3</a></li>
                                <li><a>サブメニュー2.4</a></li>
                                <li><a>サブメニュー2.5</a></li>
                            </ul>
                        </li>
                        <li><a>サブメニュー3</a></li>
                        <li><a>サブメニュー4</a>
                            <ul>
                                <li><a>サブメニュー4.1</a></li>
                                <li><a>サブメニュー4.2</a></li>
                                <li><a>サブメニュー4.3</a></li>
                                <li><a>サブメニュー4.4</a></li>
                                <li><a>サブメニュー4.5</a></li>
                                <li><a>サブメニュー4.6</a></li>
                                <li><a>サブメニュー4.7</a></li>
                                <li><a>サブメニュー4.8</a></li>
                            </ul>
                        </li>
                        <li><a>サブメニュー5</a></li>
                        <li><a>サブメニュー6</a></li>
                        <li><a>サブメニュー7</a></li>
                        <li><a>サブメニュー8</a></li>
                    </ul>
                </li>
                <li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">メニュー3</span></a></li>
                <li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">メニュー4</span></a></li>
                <li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">メニュー5</span></a></li>
                <li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">メニュー6</span></a>
                    <ul>
                        <li><a>サブメニュー6.1</a></li>
                        <li><a>サブメニュー6.2</a></li>
                        <li><a>サブメニュー6.3</a></li>
                        <li><a>サブメニュー6.4</a></li>
                        <li><a>サブメニュー6.5</a></li>
                        <li><a>サブメニュー6.6</a></li>
                        <li><a>サブメニュー6.7</a></li>
                        <li><a>サブメニュー6.8</a></li>
                        <li><a>サブメニュー6.9</a></li>
                    </ul>
                </li>
                <li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu7</span></a></li>
                <li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu8</span></a></li>
            </ul>
  5. 次のスクリプトを追加して、ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#menu1").wijmenu({
                orientation: "horizontal"
            });
        });
    </script>
  6. アプリケーションを実行します。メニューは、次の図のようになります。

 

 

Copyright © GrapeCity inc. All rights reserved.