</style>
このマークアップはウィジェットをスタイリングします。
アプリケーションを作成して、wijcarousel ウィジェットを追加して初期化しました。次の手順「手順 3：プロジ ェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 3：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijcarousel ウィジェットを追加して初期化しました。この手順では、
ウィジェットの実行時のインタラクティブ操作を確認します。
以下の手順を実行します。
1. ［F5］を押して、アプリケーションを実行します。アプリケーションと wijcarousel は次のように表示されます。
2. 画像とキャプションの下のドットの１つを押して、別の画像に移動します。
3. 左右の矢印を押して、前または次の画像に移動します。
4. 右上隅の〈Play〉ボタンを押して、画像をスライドショーで再生します。
このチュートリアルでは、wijcarousel ウィジェットをアプリケーションに追加して、実行時のウィジェットを観 察しました。
Wijcarousel タスク別ヘルプ
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="wijcarousel0" class="">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word"
/><span>キャプション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2"
/><span>キャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3"
/><span>キャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4"
/><span>キャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5"
/><span>キャプション 5</span></li>
<li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/6" title="Word"
/><span>キャプション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/7" title="Word2"
/><span>キャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/8" title="Word3"
/><span>キャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/9" title="Word4"
/><span>キャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/10" title="Word5"
/><span>キャプション 5</span></li>
</ul>
</div>
このマークアップは、カルーセルウィジェットのコンテンツをページに追加します。 次の手順では、カルーセルの アニメーションを設定します。
4. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加して animated オプションを設定します。
<div><input id="chkQueue" type="checkbox" /></div>
<div><label for="chkQueue"> Animation Settings: Queue </label></div>
<div><label for="selEasing">Easing:</label></div><div>
<select id="selEasing">
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
</select></div>
<div><input type="button" value="適用" onclick="changeProperties()" /></div>
</div></div>
これにより wijcarousel のアニメーションをカスタマイズする要素が追加されます。 実行時に、イージングスタ イルを選択できます。〈適用〉ボタンをクリックして選択したスタイルを適用します。 スタイルを適用すると、
〈Previous〉または〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。
5. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加してスタイルのオプションを設定します。
<style type="text/css">
#wijcarousel0 {
width:750px;
height:300px;
}
</style>
これにより wijcarousel ウィジェットのサイズが設定されます。
6. 前の手順で追加した </style> 終了タグの後に、以下の jQuery スクリプトを追加して wijcarousel ウィジェットを初 期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel({
display: 1, showTimer: false });
});
function changeProperties() { var animationOptions = { queue: $('#chkQueue').val(), easing: $('#selEasing').val() };
$('#wijcarousel0').wijcarousel({
animation: animationOptions });
}
</script>
これによりカルーセルが初期化され、アニメーションが追加されます。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、チェックボックスを ON にしてイージングスタイルを選択し、〈適 用〉ボタンをクリックして選択したスタイルを適用します。 スタイルを適用すると、〈Previous〉または
〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。