タブアニメーションの設定

wijtabs ウイジェットでは、タブ間の遷移に使用するアニメーションを追加できます。この機能を利用するには、showOption オプションと hideOption オプションを使用します。 Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/tabs/Animation）にアクセスし、MVC コントロールエクスプローラの Tabs > Animation サンプルのライブデモをご覧ください。

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

以下のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div id="tabs"> <ul> <li><a href="#tabs-1">タブ１</a></li> <li><a href="#tabs-2">タブ２</a></li> <li><a href="#tabs-3">タブ３</a></li> </ul> <div id="tabs-1"> <p> タブ1のコンテンツ</p> </div> <div id="tabs-2"> <p> タブ2のコンテンツ</p> </div> <div id="tabs-3"> <p> タブ３のコンテンツ</p> </div> </div>

ソースビュー

コードのコピー

<div id="tabs">
<ul>
        <li><a href="#tabs-1">タブ１</a></li>
        <li><a href="#tabs-2">タブ２</a></li>
        <li><a href="#tabs-3">タブ３</a></li>
</ul>
<div id="tabs-1">
        <p>
               タブ1のコンテンツ</p>
</div>
<div id="tabs-2">
        <p>
               タブ2のコンテンツ</p>
</div>
<div id="tabs-3">
        <p>
               タブ３のコンテンツ</p>
</div>
    </div>

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ showOption: { blind: true, fade: true, duration: 1500 }, hideOption: { blind: false, fade: true, duration: 200 } }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#tabs").wijtabs({ showOption: {
            blind: true,
            fade: true,
            duration: 1500
        },
            hideOption: {
                blind: false,
                fade: true,
                duration: 200
            }
        });
       });
</script>

アプリケーションを実行し、タブヘッダーをクリックして、新しいタブコンテンツがゆっくりと降りてきて、フェードインすることを確認してください。