culture: "ja-JP"
});
});
</script>
2. アプリケーションを実行すると、イベントカレンダーは日本語で表示されます。
});
});
</script>
2. アプリケーションを実行すると、イベントカレンダーは次のように表示されます。 ナビゲーションバーが欠落して いることに注意してください。
Wijexpander
wijexpander ウィジェットでは、さまざまなアニメーション効果を使用して、展開したパネル内の埋め込みや外部 コンテンツを表示または非表示にできます。実行時にエキスパンダのヘッダーをクリックすると、展開したコンテン ツを表示または非表示にできます。wijexpander ウィジェットは、jquery.wijmo.wijexpander.js ライブラリによ って作成されます。
次の例のように、<h1> と <div> タグの組み合わせを使用して、コンテンツとヘッダーを作成できます。
<div id="expander">
<h1>
ヘッダー </h1>
<div>
コンテンツ </div>
</div>
次のスクリプトを使用し、これらの DOM 要素構造体のいずれかを初期化できます。
<script type="text/javascript">
$(document).ready(function() { $("#expander").wijexpander();
});
</script>
プロジェクトを実行すると、エキスパンダはデフォルトの縮小位置になります。
その展開位置では、このような表示になります。
関連項目：
wijexpander の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijexpander 依存関係
Wijexpander オプション
Wijexpander イベント
Wijexpander メソッド
Wijexpander チュートリアル
以下のチュートリアルでは、クリックすると展開して指定されたコンテンツを表示するペイン構成のエキスパンダを 含む MVC プロジェクトの作成手順について説明します。
注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。
手順 1：ビューの設定
この手順では、最初にビューを設定します。ウィジェットが展開されたときに表示されるコンテンツをエキスパンダ に追加します。
注意：この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、
「MVC Classic プロジェクトの作成」トピックを参照してください。
以下の手順を実行します。
1. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
2. 次のマークアップをページの <body> タグ内の、@RenderBody() のすぐ後に追加します。
<div id="expander">
<h2>ヘッダー</h2>
<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>
</div>
このマークアップは、エキスパンダのコンテンツをページに追加します。
この手順では、ビューを作成しました。次の手順「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウ ィジェットを初期化します。
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、エキスパンダに表示されるコンテンツを追加しました。この手順では、ウィ ジェットを初期化するために必要な jQuery スクリプトを追加します。
以下の手順を実行します。
1. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijexpander ウィジェッ トを初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#expander").wijexpander();
});
</script>
このスクリプトはウィジェットを初期化します。
アプリケーションを作成し、wijexpander ウィジェットを追加して初期化しました。次の手順「手順 3：プロジェ クトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 3：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijexpander ウィジェットを追加して初期化しました。この手順では、
ウィジェットの実行時のインタラクティブ操作を表示します。
以下の手順を実行します。
1. ［F5］を押して、アプリケーションを実行します。アプリケーションが表示されます。初期に、wijexpander は 展開状態で表示されます。
2. wijexpander のヘッダーを１回クリックすると、エキスパンダが縮小します。
このチュートリアルでは、wijexpander ウィジェットをアプリケーションに追加し、ウィジェットを初期化して、
実行時のウィジェットを観察しました。