次のコードは、カレンダー月を移動するときに、EaseInBounce などの特定のアニメーションを指定するイージン グオプションおよびアニメーションが存続する時間を指定する持続時間オプションを設定する方法を示します。 こ の例では、持続時間オプションは 2500 ミリ秒に設定します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#calendar1").wijcalendar({
easing: "easeInBounce", duration: 2500 });
});
</script>
<div class="main demo">
<!-- デモマークアップの開始 -->
<div id="calendar1"></div>
<!-- デモマークアップの終了 -->
<div class="demo-options">
<!-- オプションマークアップの開始 -->
<!-- オプションマークアップの終了 -->
</div>
</div>
このトピックの作業結果
〈Next〉または〈Previous〉矢印をクリックして別のカレンダー月に移動し、カレンダーがスライドインするとバ ウンドインし、スライドアウトするとバウンドアウトすることを確認します。
Wijcarousel
wijcarousel ウィジェットでは、仮想化カルーセルに画像のリストを表示できます。wijcarousel ウィジェットは、
jquery.wijmo.wijcarousel.js ライブラリによって作成されます。
次の例のように、画像をウィジェットに組み込むことができます。
<div>
<div id="wijcarousel0">
<ul>
<li>
<img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word" /><span>キャプ ション 1</span></li>
<li>
<img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word2" /><span>キャプ ション 2</span></li>
<li>
<img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word3" /><span>キャプ ション 3</span></li>
<li>
<img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word4" /><span>キャプ ション 4</span></li>
<li>
<img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word5" /><span>キャプ ション 5</span></li>
<li>
<img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word" /><span>キャプ ション 6</span></li>
<li>
<img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word2" /><span>キャプ ション 7</span></li>
<li>
<img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word3" /><span>キャプ ション 8</span></li>
<li>
<img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word4" /><span>キャプ ション 9</span></li>
<li>
<img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word5" /><span>キャ プション 10</span></li>
</ul>
</div>
</div>
次のスクリプトを使用し、これらの DOM 要素構造体のいずれかを初期化できます。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel({
display: 3, step: 2,
orientation: "horizontal"
});
});
</script>
CSS スタイルを追加します：
<style type="text/css">
#wijcarousel0 {
width: 1050px;
height: 300px;
}
</style>
ここで取り上げたマークアップとスクリプトは、同様なカルーセルになります。
関連項目：
wijcarousel の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
wijcarousel 依存関係
wijcarousel オプション
wijcarousel イベント
Wijcarousel チュートリアル
以下のチュートリアルでは、複数の画像を表示するカルーセルを含む MVC プロジェクトの作成手順について説明し ます。
注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。
手順 1：ビューの設定
この手順では、最初にビューを設定します。コンテンツをカルーセルに追加します。
注意：この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、
「MVC Classic プロジェクトの作成」トピックを参照してください。
以下の手順を実行します。
1. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
2. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="wijcarousel0">
<ul>
<li><img src="http://lorempixum.com/750/300/sports/1" alt="スポーツ 1" />
<span>キャプション 1</span></li>
<li><img src="http://lorempixum.com/750/300/sports/2" alt="スポーツ 2" />
<span>キャプション 2</span></li>
<li><img src="http://lorempixum.com/750/300/sports/3" alt="スポーツ 3" />
<span>キャプション 3</span></li>
<li><img src="http://lorempixum.com/750/300/sports/4" alt="スポーツ 4" />
<span>キャプション 4</span></li>
<li><img src="http://lorempixum.com/750/300/sports/5" alt="スポーツ 5" />
<span>キャプション 5</span></li>
<li><img src="http://lorempixum.com/750/300/sports/6" alt="スポーツ 6" />
<span>キャプション 6</span></li>
<li><img src="http://lorempixum.com/750/300/sports/7" alt="スポーツ 7" />
<span>キャプション 7</span></li>
<li><img src="http://lorempixum.com/750/300/sports/8" alt="スポーツ 8" />
<span>キャプション 8</span></li>
</ul>
</div>
このマークアップはカルーセルのコンテンツをページに追加します。
この手順では、ビューを作成しました。次の手順「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウ ィジェットを初期化します。
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、カルーセルに表示するコンテンツを追加しました。この手順では、ウィジェ ットを初期化するために必要な jQuery スクリプトを追加します。
以下の手順を実行します。
1. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを 初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel(
{
display: 1, showTimer: true, showPager: true, loop: true,
pagerType: "dots",
showContorlsOnHover: false }
);
});
</script>
このスクリプトはウィジェットを初期化します。
2. 前の手順で追加した終了の </script> タグの後に、以下のマークアップを追加して、wijcarousel ウィジェット をスタイリングします。
<style type="text/css">
#wijcarousel0 {
width: 750px;
height: 300px;
}
</style>
このマークアップはウィジェットをスタイリングします。
アプリケーションを作成して、wijcarousel ウィジェットを追加して初期化しました。次の手順「手順 3：プロジ ェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 3：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijcarousel ウィジェットを追加して初期化しました。この手順では、
ウィジェットの実行時のインタラクティブ操作を確認します。
以下の手順を実行します。
1. ［F5］を押して、アプリケーションを実行します。アプリケーションと wijcarousel は次のように表示されます。
2. 画像とキャプションの下のドットの１つを押して、別の画像に移動します。
3. 左右の矢印を押して、前または次の画像に移動します。
4. 右上隅の〈Play〉ボタンを押して、画像をスライドショーで再生します。
このチュートリアルでは、wijcarousel ウィジェットをアプリケーションに追加して、実行時のウィジェットを観 察しました。