wijcarousel ウィジェットでは、ユーザーは前および次のコンテンツ要素をプレビューできます。 この機能を利用 するには、単に preview オプションを設定します。 例については、Web サイト
（http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Preview）にアクセスし、MVC コントロ ールエクスプローラの Carousel > Preview サンプルのライブデモをご覧ください。
カルーセルコンテンツをプレビューするには、以下の手順を実行します。
1. ASP.NET MVC 3 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="wijcarousel0">
<ul>
<li>
<img src="http://lorempixum.com/750/300/sports/1" alt="スポーツ １" />
<span>キャプション 1</span> </li>
<li>
<img src="http://lorempixum.com/750/300/sports/2" alt="スポーツ ２" />
<span>キャプション 2</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/3" alt="スポーツ ３" />
<span>キャプション 3</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/4" alt="スポーツ ４" />
<span>キャプション 4</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/5" alt="スポーツ ５" />
<span>キャプション 5</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/6" alt="スポーツ ６" />
<span>キャプション 6</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/7" alt="スポーツ ７" />
<span>キャプション 7</span></li>
<li>
<img src="http://lorempixum.com/750/300/sports/8" alt="スポーツ ８" />
<span>キャプション 8</span></li>
</ul>
</div>
このマークアップは、１つのカルーセルウィジェットをページに追加します。 次の手順では、カルーセルを初期化 します。
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを 初期化し、preview オプションを設定します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel({
display: 1, showTimer: false, showPager: false, loop: false,
showContorlsOnHover: false, preview: true
});
$("#Button1").click(function () {
$("#div1").css({ opacity: "" });
});
});
</script>
<style type="text/css">
#wijcarousel0 {
width: 500px;
height: 300px;
}
</style>
上記のスクリプトとマークアップはカルーセルを初期化し、カルーセルのプレビューとスタイルを設定します。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、カルーセル内の前と次の要素がカルーセルウィジェットでプレビュー されることを確認します。 現在およびプレビューされている画像を変更するには、〈Previous〉または〈Next〉
ボタンを押します。
Wijcombobox
この使いやすいコンボボックスウィジェットは、サイズ変更や編集が可能なテキストボックスとドロップダウンリス トを HTML ページに表示します。wijcombobox ウィジェットは、Microsoft Windows フォームの ComboBox コ ントロールをエミュレートしています。
<input id="combobox" />
あるいは
<select id="combobox">
<option value="c++">c++</option>
<option value="java">java</option>
<option value="php">php</option>
<option value="coldfusion">coldfusion</option>
</select>
ここで、wijdialog ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml ファイ ルに追加できます。
<script type="text/javascript">
$(document).ready(function () { $("#combobox").wijcombobox();
};
</script>
プログラムを実行すると、wijcombobox が .cshtml ページに表示されます。wijcombobox ボタン上のドロップダ ウンボタンをクリックすると、コンボボックスに追加した４つの選択が表示されます。
関連項目：
wijcombobox の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijcombobox 依存関係
Wijcombobox オプション
Wijcombobox イベント
Wijcombobox メソッド
Wijcombobox チュートリアル
以下のチュートリアルでは、ASP.NET MVC 3 Wijmo アプリケーションの作成手順について説明し、ページへのコ ンボボックスのコンテンツの追加、コンボボックスへのデータ移植、アニメーションの追加、およびコンボボックス のリンクを行います。
手順 1：ビューの設定
この手順では、マークアップを追加し、コンテンツをコンボボックスに追加します。以下を実行します。
1. Microsoft Visual Studio の［ファイル］メニューから、[新しいプロジェクト］を選択します。［新しいプロジェ クト］ダイアログボックスが開きます。
2. テンプレートの［Visual Basic］または［Visual C#］より［Web］を選択します。
3. 右ペインから［ASP.NET MVC 3 Wijmo アプリケーション］を選択します。
Wijmo プロジェクトが作成されます。プロジェクトに Wijmo for MVC チュートリアルで作業する Models、
Views、および Controllers フォルダが含まれていることがわかります。
4. ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックし て、ファイルを開きます。
5. 次のマークアップをページの <body> タグ内に追加します。このマークアップはボタンのコンテンツをページに追 加します。
<div>
<label>
HTML 入力要素</label>
<input id="tagsinput" />
</div>
<div>
<label>
HTML 選択要素</label>
<select id="tags">
<option value="c++">c++</option>
<option value="java">java</option>
<option value="php">php</option>
<option value="coldfusion">coldfusion</option>
<option value="javascript">javascript</option>
<option value="asp">asp</option>
<option value="ruby">ruby</option>
<option value="python">python</option>
<option value="c">c</option>
<option value="scala">scala</option>
<option value="groovy">groovy</option>
<option value="haskell">haskell</option>
<option value="perl">perl</option>
</select>
</div>
<!-- デモマークアップの終了 -->
<div class="demo-options">
<!-- オプションマークアップの開始 -->
<button value="" id="show">
元の選択要素の表示</button>
<!-- オプションマークアップの終了 -->
</div>
</div>
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、コンボボックスに表示するコンテンツを追加しました。ここでは、jQuery スクリプトを追加し、ウィジェットを初期化できます。
前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijcombobox ウィジェット を初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// 適切なすべての jQuery 機能をここに設定します。
$("#tagsinput").wijcombobox(
{
showingAnimation: { effect: "blind" }, hidingAnimation: { effect: "blind" }, data: [
{
label: 'c++', value: 'c++' },
{
label: 'java', value: 'java'
}, {
label: 'php', value: 'php' },
{
label: 'coldfusion', value: 'coldfusion' }, {
label: 'javascript', value: 'javascript' },
{
label: 'asp', value: 'asp' },
{
label: 'ruby', value: 'ruby' },
{
label: 'python', value: 'python' },
{
label: 'c', value: 'c' },
{
label: 'scala', value: 'scala' },
{
label: 'groovy', value: 'groovy' },
{
label: 'haskell', value: 'haskell'
}, {
label: 'perl', value: 'perl' }
] } );
$("#tags").wijcombobox(
{
showingAnimation: { effect: "blind" }, hidingAnimation: { effect: "blind" } }
);
$('#show').click(function () { $("#tags").show();
}) });
</script>
手順 3：プロジェクトの実行
この手順では、アプリケーションを実行し、新しいデータやグラフ要素（Y 軸のタイトル、グラフヘッダー、グラフ ラベルなど）を観察します。
1. ［F5］を押して、アプリケーションを実行します。
2. 以下を観察します。
コンボボックスのドロップダウン矢印をクリックします。コンボボックスの項目が下方向に移動するとアニメーシ ョンが表示されることに注意してください。
アニメーションは次のコードを使用したときに表示されます。
showingAnimation: { effect: "blind", duration: 2500}, hidingAnimation: { effect: "blind" },
〈元の選択要素の表示〉ボタンをクリックします。別のコンボボックスが次のように表示されることに注意してく ださい。
次のコードを使用すると、データがコンボボックスの項目に表示されることに注意してください。
$(document).ready(function () {
$("#tagsinput").wijcombobox(
{ data: [ {
label: 'c++', value: 'c++' },
{
label: 'java', value: 'java' },
{
label: 'php', value: 'php' },
{
label: 'coldfusion', value: 'coldfusion' }, {
label: 'javascript', value: 'javascript'
}, {
label: 'asp', value: 'asp' },
{
label: 'ruby', value: 'ruby' },
{
label: 'python', value: 'python' },
{
label: 'c', value: 'c' },
{
label: 'scala', value: 'scala' },
{
label: 'groovy', value: 'groovy' },
{
label: 'haskell', value: 'haskell' },
{
label: 'perl', value: 'perl' }
] } );
Wijcombobox タスク別ヘルプ
タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザ ーを対象としています。 ヘルプに記述された手順に従うことによって、さまざまな wijcombobox 機能を実演する プロジェクトを作成して、wijcombobox の用途を理解することができます。
ComboBox の幅の変更
<style type="text/css" >
.wijmo-wijcombobox {
position: relative;
width:250px !important;
}
.wijmo-wijcombobox-input {
width:216px !important;
}
</style>