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

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

拡張方向の変更

wijexpander ウィジェットでは、ユーザーは上、下、左、または右からペインのコンテンツを拡張できます。この 機能を利用するには、単に expandDirection オプションを設定します。例については、Web サイト

（ http://demo.componentone.com/ASPNET/MVCExplorer/expander/ExpandDirection）にアクセスし、MVC コントロールエクスプローラの Expander > ExpandDirection サンプルのライブデモをご覧ください。

拡張方向を設定するには、以下の手順を実行します。

1. ASP.NET MVC 3 Wijmo アプリケーションを作成します。

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

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

<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>

このマークアップは、１つのエクスパンダウィジェットのコンテンツをページに追加します。次の手順では、エクスパンダの拡張方向を設定します。

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

$(document).ready(function () {

$("#expander").wijexpander({ expandDirection:

"top" });

});

</script>

</div>

<div>

<label for="selEasing2">Easing:</label>

</div>

</select>

function applyOptions() {

$("#expander").wijexpander("option", "expandDirection", $("#expandDirection").get(0).value);

}

</script>

これにより、４つの値を持つドロップダウンボックスが追加されます。実行時に、ドロップダウンボックスから方向を選択し、wijexpander ウィジェットの拡張方向を変更します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ドロップダウンボックスから方向を選択します。それに応じて、

wijexpander ウィジェットの拡張方向が変わります。

外部コンテンツの表示

wijexpander ウィジェットに外部コンテンツを表示できます。この機能を利用するには、単に contentURL オプ ションを設定します。例については、Web サイト

（ http://demo.componentone.com/ASPNET/MVCExplorer/expander/ContentURL）にアクセスし、MVC コントロールエクスプローラの Expander > ContentUrl サンプルのライブデモをご覧ください。

拡張方向を設定するには、以下の手順を実行します。

1. ASP.NET MVC 3 Wijmo アプリケーションを作成します。

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

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

<h3>componentone.com（クリックして縮小／拡張）</h3>

</div>

このマークアップは、１つのエクスパンダウィジェットのコンテンツをページに追加します。次の手順では、エクスパンダのコンテンツを設定します。

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

$(document).ready(function () {

$("#expanderContentUrl1").wijexpander({ contentUrl:

"http://www.componentone.com/", expanded:true });

});

</script>

これにより、ComponentOne Web サイトがエクスパンダに表示されます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ComponentOne Web サイトがウィジェットに表示されることを確認 します。リンクをクリックして、エクスパンダ内で Web サイトを操作できることを確認します。

Wijgallery

wijgallery ウィジェットでは、仮想化ギャラリーに画像のリストを表示できます。wijgallery ウィジェットは、

jquery.wijmo.wijgallery.js ライブラリによって作成されます。

次の例のように、wijgallery はグラフィック画像のリストで構成されます。

</ul>

</div>

次のスクリプトは wijgallery ウィジェットを初期化します。

$(document).ready(function () { $("#wijgallery").wijgallery({

showControlsOnHover: true, thumbsDisplay: 4,

thumbsLength: 150, showPager: false });

$("#btn1").click(function () {

$("#wijgallery").wijgallery("option", "disabled", false);

});

</script>

ここで取り上げたマークアップとスクリプトは、次のような結果になります。

関連項目：

wijgallery の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。

 wijgallery 依存関係

 wijgallery オプション

 wijgallery イベント

Wijgallery チュートリアル

以下のチュートリアルでは、複数の画像を表示するギャラリーを含む MVC プロジェクトの作成手順について説明します。

注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。

手順 1：ビューの設定

この手順では、最初にビューを設定します。コンテンツをギャラリーに追加します。

注意：この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、

「MVC Classic プロジェクトの作成」トピックを参照してください。

以下の手順を実行します。

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

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

<ul>

<span>キャプション 1</span></li>

<span>キャプション 2</span></li>

<span>キャプション 3</span></li>

<span>キャプション 4</span></li>

<span>キャプション 5</span></li>

<span>キャプション 6</span></li>

<span>キャプション 7</span></li>

<span>キャプション 8</span></li>

</ul>

</div>

このマークアップはギャラリーのコンテンツをページに追加します。

この手順では、ビューを作成しました。次の手順「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウィジェットを初期化します。

手順 2：ウィジェットの初期化

前の手順では、マークアップを追加し、ギャラリーに表示されるコンテンツを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。

以下の手順を実行します。

1. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijgallery ウィジェットを初期化します。

$(document).ready(function () { $("#wijgallery").wijgallery({

showControlsOnHover: true,

thumbsDisplay: 4, thumbsLength: 150, showPager: false });

$("#btn1").click(function () {

$("#wijgallery").wijgallery("option", "disabled", false);

});

</script>

このスクリプトはウィジェットを初期化します。

2. 前の手順で追加した終了の </script> タグの後に、次のマークアップを追加して、wijgallery ウィジェットをスタイリングします。

#wijgallery {

width: 750px;

} </style>

このマークアップはウィジェットをスタイリングします。

アプリケーションを作成し、wijgallery ウィジェットを追加して初期化しました。次の手順「手順 3：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。

手順 3：プロジェクトの実行

前の手順では、アプリケーションを作成し、wijgallery ウィジェットを追加して初期化しました。この手順では、

ウィジェットの実行時のインタラクティブ操作を確認します。

以下の手順を実行します。

1. ［F5］を押して、アプリケーションを実行します。アプリケーションと wijgallery は次のように表示されます。

2. メイン画像の下にあるサムネイル画像の１つを押して、別の画像に移動します。

3. 左右の矢印を押して、前または次の画像に移動します。

4. 右上隅の〈Play〉ボタンを押して、画像をスライドショーで再生します。

このチュートリアルでは、wijgallery ウィジェットをアプリケーションに追加し、ウィジェットを初期化して、実行時のウィジェットを観察しました。

Wijgallery タスク別ヘルプ

ドキュメント内 MVC Tools (ページ 172-180)