wijdatepager ウィジェットでは、週の最初の曜日（0～6）を設定できます。たとえば、日曜日は０、月曜日は１ のように続きます。デフォルトでは、firstDayOfWeek オプションは０（日曜日）に設定されます。
週の最初の曜日を設定するには、以下の手順を実行します。
1. 新しい ASP.NET MVC 3 Wijmo アプリケーションを作成します（「MVC Classic プロジェクトの作成」を参照 してください）。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="datepager"></div>
このマークアップは datepager ウィジェットのコンテンツをページに追加します。次の手順では、datepager を 初期化します。
4. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力し、wijdatepager ウィジェット を初期化して、selectedDate オプションを設定します。
<script type="text/javascript">
$("#datepager").wijdatepager({ firstDayOfWeek: 1 });
</script>
実行時に、週の最初の曜日に月曜日が表示されます。
このトピックの作業結果
［F5］を押して、アプリケーションを実行します。週の最初の曜日に月曜日が表示されることに注意してください。
Wijdialog
wijdialog ウィジェットは、情報の表示に便利なモーダルまたはモードレスダイアログボックスを作成可能な UI で す。wijdialog ウィジェットは、アニメーション、外部コンテンツの表示、およびアラートウィンドウとしての wijdialog ウィジェットの使用をサポートします。wijdialog ウィジェットでユーザーは移動したり、サイズ変更 したり、インタラクティブ操作を行うことができます。
メニューを表示するビューの .cshtml ファイルを開きます。次のマークアップを使用し、ダイアログボックスを作 成します。
<div id="dialog" title="ダイアログ">
<p>
これは既定のダイアログです。</p>
</div>
リストを作成したら、wijdialog ウィジェットを初期化する必要があります。これを行うには、リストを含 む .cshtml ファイルに次のスクリプトを追加します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { // デバッガ
// $(":wijmo-wijdialog").wijdialog("destroy").remove();
$('#dialog').wijdialog({
autoOpen: true, captionButtons: {
refresh: { visible: false } }
});
});
</script>
プロジェクトを実行すると、基本の wijdialog は次のような表示になります。
wijdialog の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijdialog 依存関係
Wijdialog イベント
Wijdialog オプション
Wijdialog チュートリアル
このセクションでは、指定されたコンテンツを表示するダイアログボックスを備えた MVC プロジェクトの作成手順 について説明します。
このトピックでは、ASP.NET MVC 3 Wijmo アプリケーションを作成済みであることが前提となります。作成して いない場合は、「MVC Classic プロジェクトの作成」を参照してください。
手順 1：ビューの設定
この手順では、マークアップを追加し、コンテンツをダイアログボックスに追加します。
1. ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックし て、ファイルを開きます。
2. 以下のマークアップをページの <body> タグ内に追加します。このマークアップはダイアログボックスをページに 追加します。
<div id="dialog" title="Lorem Ipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Pellentesque gravida, justo in fringilla cursus,<br/>
dui orci ornare augue, at placerat odio lectus vitae lorem.<br/>
Duis consequat mauris erat, vel vulputate velit.;<br/>
</p>
</div>
手順 2：ウィジェットの初期化
前の手順では、wijdialog ウィジェットを作成し、マークアップを使用してそのコンテンツを指定しました。この手 順では、jQuery スクリプトを追加し、ウィジェットを初期化します。
終了の <div> タグの後に、次のスクリプトを追加します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { // デバッガ
// $(":wijmo-wijdialog").wijdialog("destroy").remove();
$('#dialog').wijdialog({
autoOpen: true, captionButtons: {
refresh: { visible: false } }
});
});
</script>
手順 3：プロジェクトの実行
この手順では、アプリケーションを実行し、指定されたコンテンツを表示します。
［F5］を押して、プロジェクトを実行します。wijdialog ウィジェットは次のような表示になります。