エクスパンダへのアニメーションの適用

wijexpander ウィジェットはアニメーションをサポートします。この機能を利用するには、単に animated オプションを設定します。Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/expander/Animation）にアクセスし、MVC コントロールエクスプローラの Expander > Animation サンプルのライブデモをご覧ください。

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

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

ソースビュー	コードのコピー
<div id="expander1"> <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="expander2"> <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="expander1">
<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="expander2">
<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 ウィジェットを初期化して animated オプションを設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#expander").wijexpander(); $("#expander2").wijexpander({ animated:"custom1", expanded:false }); $("#expander3").wijexpander({ animated:"custom2" }); $("#expander4").wijexpander({ animated:false }); jQuery.wijmo.wijexpander.animations.custom1 = function (options) { this.slide(options, { easing:"easeOutExpo", duration: 900 }); } jQuery.wijmo.wijexpander.animations.custom2 = function (options) { if (options.expand) options.content.show("puff", options, 300); else options.content.hide("explode", options, 300); } }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#expander").wijexpander();
$("#expander2").wijexpander({
animated:"custom1", expanded:false
        });
$("#expander3").wijexpander({
animated:"custom2"
        });
$("#expander4").wijexpander({
animated:false
        });
jQuery.wijmo.wijexpander.animations.custom1 = function (options) {
this.slide(options, {
easing:"easeOutExpo",
duration: 900
            });
        }
jQuery.wijmo.wijexpander.animations.custom2 = function (options) {
if (options.expand)
options.content.show("puff", options, 300);
else
options.content.hide("explode", options, 300);
        }
    });
</script>

これによりエクスパンダが初期化され、アニメーションが追加されます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、各エクスパンダのヘッダーをクリックして設定したアニメーションを表示します。最初のエクスパンダはデフォルトのアニメーションを表示し、２番目と３番目のエクスパンダはカスタムアニメーションを表示し、４番目のエクスパンダは無効になっています。