スマートフォン向けサイトにjQueryMobileのDateBoxを導入する

PC向けサイトではjQueryのDatepickerを導入していたのですが
スマートフォン向けのjQueryMobileではDateBoxがあるようなので、導入してみました。

jQueryMobileのサイトからjQueryのファイルをDLしましょう。
この記事の時点では1.1.1がStableVerでした。
【20140603追記】
1.4.2

DLして解凍したファイルのうち

  • jquery.mobile-1.1.1.min.js
  • jquery.mobile-1.1.1.min.css
  • /images

を使います。

さらにDateBoxのサイトDownload & UseからファイルをDLします。
この記事の時点で最新版は1.0.1+でした。

Download Links – “Stable” Version内の

  • CSS – Required
  • Core Methods – Required
  • DateBox Mode

をDLします。

jQuery本体も必要ですが、これはGoogleのCDNを利用しました。
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

DLしたファイル郡をこんな感じでHeader内に記述します。

Dateboxを設置したい場所に次のように記述します。

するとInputの右にボタンがついたフィールドができます

そのボタンをクリックするとDateboxが現れます。

とりあえず設置するところまでできました。

ここまで書いたのですが、もっと素晴らしいサイトを見つけたので、そちらを参考にしたほうがいいです。
jQuery MobileのDateboxをカスタマイズ-その2

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
西畑一馬 鍋坂理恵
アスキー・メディアワークス
売り上げランキング: 4062

関連記事

コメントを残す

メールアドレスが公開されることはありません。

Trackback URL

管理者の承認後に表示します。