はじめに
今回は、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobile向けのプラグインを紹介します。日付や時間入力に便利なDateboxの使い方とさまざまなUIによる入力を紹介します。
対象読者
jQuery mobile、スマートフォンに興味があり、使ってみたい方。
必要な環境と準備
執筆時点のjQueryの最新版は、2.0.3と1.10.2ですが、2.0.3はバージョン8以前のInternet Explorerに対応しないなど、制限も大きいため、今回のサンプルでは1.10.2を用いています。第1回を参考にダウンロードする方法もありますが、今回のサンプルからは昨今一般的な方法になりつつあるGoogle CDNを読み込む形とします。以下のスクリプトでjQuery 1.10.2を呼び出します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
また、jQueryプラグインの基本的な使い方は、第3回を参照してください。
また、執筆時点でのjQuery Mobileの最新版は、1.3.2です。こちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ（cssファイルが呼び出す画像ファイルが格納されたフォルダ）と、jquery.mobile-1.3.2.min.css（通常使用するcssファイル）とjquery.mobile-1.3.2.min.js（スクリプトファイル）をmobileフォルダに入れています。
日付・時間入力に便利なプラグイン「Datebox」
今回紹介するjQuery Mobile用プラグイン「Datebox」は、さまざまなスマートフォン向けのUIで日付・時間入力を容易にするプラグインです。また、オプションにより入力できる日付・時間を限定させたり、入力方法を変更させたりすることもできます。
Dateboxを使用するには、まずDateboxサイトからダウンロードします。サイトの中の「Download & Use」を選択し、「Download Links - Current Version」を選択して以下のファイルをダウンロードします。サンプルデータではpluginsフォルダの中に入っています。なお、プラグインの日本語化を行う「jquery.mobile.datebox.i8n.jp.js」のみ別のサイトからダウンロードします。
| ファイル名 | 機能 | 呼び出し必須のファイル |
|---|---|---|
| jqm-datebox.core.min.js | プラグインの本体 | ＊ |
| jqm-datebox.min.css | プラグインのCSSファイル | ＊ |
| jquery.mobile.datebox.i8n.jp.js | プラグインの日本語化ファイル | ＊ |
| jqm-datebox.mode.calbox.min.js | カレンダーによる日付選択に利用 | - |
| jqm-datebox.mode.datebox.min.js | 上下ボタンによる日付・時間選択に利用 | - |
| jqm-datebox.mode.flipbox.min.js | 縦スクロール式の日付・時間選択に利用 | - |
| jqm-datebox.mode.slidebox.min.js | 横スクロール式の日付・時間選択に利用 | - |
| jqm-datebox.mode.durationbox.min.js | 日・時間・分・秒の数値入力に利用 | - |
まずは入力用フォームをつくり、その右端のカレンダーマークをタッチすると、その場所でポップアップでカレンダーが表示され、カレンダーから日付を選択できるサイトをつくってみます。以下に表示例を示します。
日付入力用カレンダーがポップアップで表示される
サンプルサイトのスクリプトの一部を以下に示します。
<!--1.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="./plugins/jqm-datebox.min.css" />
<!--2.jQueryの読み込み-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--3.jQuery Mobileの読み込み-->
<script src="./mobile/jquery.mobile-1.3.2.min.js"></script>
<!--4.jQuery Mobileプラグインの読み込み-->
<script src="./plugins/jqm-datebox.core.min.js"></script>
<script src="./plugins/jqm-datebox.mode.calbox.min.js"></script>
<script src="./plugins/jquery.mobile.datebox.i8n.jp.js"></script>
（中略）
<!--5.日付入力部分の設定-->
<label for="date1">年月日入力</label>
<input name="date1" id="date1" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
まずは1～4で、事前に必ず呼び出すファイルを呼び出します。
5は日付入力部分の設定では、inputタグのtypeには「date」、data-roleには「datebox」を設定します。ここまでは他の形式で日付・時間を入力する場合でもすべて共通です。
カレンダーを表示させて日付を入力するにはdata-optionsに「'{"mode": "calbox"}'」を設定し、モードをカレンダーに設定します。
