JQuery Mobile導入を考えてみた

JQuery Mobileがようやく1.0の正式版になり、
ある案件で使いたかったので調べてみました。

JQuery Mobielはスマートフォンサイトを簡単に作るための、
フレームワークで出始めた頃から話題になっていました。
Dreamweaver CS5.5にも導入され、
スマホアプリ作りにも使われています。

どう簡単に作れるかというと、
JQuery Mobile用のクラスなどを設定するだけで、
ボタンデザインやレイアウトなどが
テーマにあわせて簡単にできます。

詳しくは下記参考サイトで・・・

JQuery Mobileではデフォルトで、
スライドしてページ遷移するエフェクトが機能があり、
今回導入したかった機能は、ページ遷移のエフェクトのみでした。

導入するにあたり、課題として
Jquery Mobileのテーマは導入したくないというのがあったんですが、
ページ遷移のエフェクト導入だけであれば、

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="hoge.css" />

として最後に適応したい独自のcssを読み込むだけです。

ただ、ページ遷移のエフェクトを有効にするには、
各ページの大元のdivタグにdata-role=”page”という属性値を設定する必要があります。
この属性値を設定したdivタグ内が1ページと認識されます。

その他細かい機能で、ヘッダーやフッターを固定したりもできますが、
またの機会に・・・

“JQuery Mobile導入を考えてみた” への1件のフィードバック

  1. Thanks a whole lot

コメントを残す