Wijmenu のアニメーション化

wijmenu ウィジェットは、アニメーション効果をサポートします。アニメーションを wijmenu ウィジェットに追加するには、以下の手順に従います。

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

ページの <body> タグ内の @RenderBody() のすぐ後に、次のマークアップを追加して、リストを作成します。

ソースビュー	コードのコピー
<ul id="menu"> <li><a>メニュー項目1</a> <ul> <li><a>メニュー項目1.1</a></li> <li><a>メニュー項目2.1</a></li> </ul> </li> <li><a>メニュー項目2</a></li> <li><a>メニュー項目3</a></li> </ul>

ソースビュー

コードのコピー

<ul id="menu">
<li><a>メニュー項目1</a>
<ul>
<li><a>メニュー項目1.1</a></li>
<li><a>メニュー項目2.1</a></li>
</ul>
</li>
<li><a>メニュー項目2</a></li>
<li><a>メニュー項目3</a></li>
</ul>

次のスクリプトを追加し、ウィジェットを初期化してアニメーションを追加します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); $("#menu").wijmenu("option", "animation", { animated: "bounce", option: { direction: "right" }, duration: 400, easing: null }) }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").wijmenu();
        $("#menu").wijmenu("option", "animation", { animated: "bounce", option: { direction: "right" }, duration: 400, easing: null })
    });
</script>

アプリケーションを実行します。menuitem1 のドロップダウンがドロップ時にバウンドします。animated: "bounce"プロパティで効果の名前を変更してアニメーション効果を変更できることに注意してください。