jQueryMobileお試し（さわりだけ）
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
jQuery Mobile試してみました
jQuery Mobile： http://jquerymobile.com/
まずはjQuery Mobileのcssとjsファイルを読み込みを。
web上にあるファイルを読み込むならこちら
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
ダウンロードするならこちらから。
アルファ版では自動でスマホに最適化されてたらしいんですが、
ベータ版ではviewportを指定してあげないといけないみたいです。
ページ構成
jQuery Mobileではページを
<div data-role="page">
pegeの中身（ヘッダー／コンテンツ／フッター全て）
</div>
というふうに「data-role=”page”」で区切って、１つのページの中に複数のページを入れることができます。
<div data-role="page" id="page1">
pege1の中身
</div>
<div data-role="page" id="page2">
pege2の中身
</div>
<div data-role="page" id="page3">
pege3の中身
</div>
こんなかんじで。
ページを切り替えるときには、href=”#page3″とすればpage3へ表示が切り替わるわけです。
もちろんいつものように１ページ1html作ることもですきます。
その場合もdata-role=”page”で包んであげるのを忘れずに。
ページ切り替えエフェクト
jQueryMobileでのページ切り替えには、デフォルトでエフェクトが付いてます。
（デフォルトのエフェクトは右→左のスライド）
rel=”external”をaタグに付けてあげると通常のリンク（エフェクト無し）にできます。
用意されているエフェクトは以下のとおり。
slide：スライド（右から左へ）
slideup：スライドアップ（下から上へ）
slidedown：スライドダウン（上から下へ）
pop：中央から飛び出す
fade：フェーディング
flip：右から左へくるっと回転
<a href="#about" data-transition="slide">slideup：スライドアップ（下から上へ）
<a href="#about" data-transition="slideup">slidedown：スライドダウン（上から下へ）
<a href="#about" data-transitio="slidedown">pop：中央から飛び出す
<a href="#about" data-transition="pop">fade：フェーディング
<a href="#about" data-transition="fade">flip：右から左へくるっと回転
<a href="#about" data-transition="flip">どれも遷移先から戻るときには逆のエフェクトが適用されます。
これだけでもうスマフォサイトっぽいですね。
だた少し動作がぎこちないのが気になります。
ちなみにjQueryMobileはデフォルトでアドレスバーを隠してくれてます。
ベータ版からデフォルトになったみたいですね。
隠して欲しくないときは↓のスクリプトを入れてあげると吉です。
[code lang=”js”]
$(document).bind(‘mobileinit’, function(){
$.mobile.useFastClick = false;
});
[/code]