« divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery | トップページ | ボタン付きのスライドショーを実装するjQueryプラグイン「Slides」 #jQuery »

2011年8月 1日 (月)

タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery

Mobiscroll
デモページ

日付や時刻をスマートフォンなどのタッチデバイスにて入力が可能になるプラグインの「Mobiscroll」の導入方法をご紹介します。

導入方法
1.ダウンロードと利用するリソース
2.head要素への記述
3.body要素への記述例

1.ダウンロードと利用するリソース
Mobiscrollのダウンロードよりスクリプトファイルをダウンロードします。

利用するリソース
jquery-1.6.1.min.js
jquery.mobile-1.0b1.min.js
jquery.mobile-1.0b1.min.css
jquery.scroller-1.0.2.js
jquery.scroller-1.0.2.css

jquery.scroller-1.0.2.jsとjquery.scroller-1.0.2.cssがダウンロードフォルダに入っています。
サーバにはjquery.scroller-1.0.2.jsとjquery.scroller-1.0.2.cssをアップロードします。
他のリソースはcode.jquery.comより利用することができます。

2.head要素への記述
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script src="設置したフォルダまでのパス/jquery.scroller-1.0.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css>
<link href="設置したフォルダまでのパス/jquery.scroller-1.0.2.css" rel="stylesheet" type="text/css>

デモファイル内(index.htmlの15行目~67行目まで)のスクリプトも記述します。
<script type="text/javascript">
$(document).ready(function () {
~~~~~~~~~~~~~~~~~~~~~
省略
~~~~~~~~~~~~~~~~~~~~~
});
</script>

3.body要素への記述例
デモファイルでは日付入力、時刻入力、現在の時刻を取得する/設定するなどなどのサンプルが用意されています。

<div data-role="content" data-theme="d">
 <form id="testform">
// 利用したい項目を記述します。デモファイル内のコードや下記の項目をご参照ください。
 </form>
</div>

日付入力項目
  <div data-role="fieldcontain">
   <label for="date1">Date</label>
   <input type="text" name="date1" id="date1" class="genField textEntry date" readonly="readonly" value="12/08/2010>
  </div>

時刻入力項目
   <div data-role="fieldcontain">
   <label for="date2">Time</label>
  <input type="text" name="date2" id="date2" class="genField textEntry date" value="11:23 AM>
  </div>

現在の時刻を取得する/設定する項目
  <div data-role="controlgroup" data-type="horizontal">
   <button id="disable" data-theme="a">Enable/Disable</button>
   <button id="get" data-theme="a">Get</button>
   <button id="set" data-theme="a">Set</button>
  </div>

|

« divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery | トップページ | ボタン付きのスライドショーを実装するjQueryプラグイン「Slides」 #jQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/41000335

この記事へのトラックバック一覧です: タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery:

« divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery | トップページ | ボタン付きのスライドショーを実装するjQueryプラグイン「Slides」 #jQuery »