jQueryMobileお試し(さわりだけ)

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

jQuery Mobile試してみました

jQuery Mobilehttp://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”」で区切って、1つのページの中に複数のページを入れることができます。


<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へ表示が切り替わるわけです。
もちろんいつものように1ページ1html作ることもですきます。
その場合もdata-role=”page”で包んであげるのを忘れずに。

ページ切り替えエフェクト

jQueryMobileでのページ切り替えには、デフォルトでエフェクトが付いてます。
(デフォルトのエフェクトは右→左のスライド)

rel=”external”をaタグに付けてあげると通常のリンク(エフェクト無し)にできます。
 
用意されているエフェクトは以下のとおり。

slide:スライド(右から左へ)
<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]