アットウィキロゴ
hear_br0wn @ ウィキ
アットウィキロゴ
hear_br0wn @ ウィキ
ページ一覧

jQuery Mobile1(基礎)

●jQuery Mobileについて

　公式：http://jquerymobile.com/
　簡易ジェネレータ：http://codiqa.com/

　JavaSqriptのスマートフォン用フレームワーク
　【特徴】
　・1つのHTMLソースで複数のページを作ることができる。
　　※ページ内リンクに近いが、ブラウザには表示されず、通常のリンクのように切り替わるためブラウザ上で見ると普通のリンクのよう

に見える。

　・HTMLタグに専用のタグを追記するだけで使える。（スクリプトの記述は一切なし）

　・CSSがあらかじめ用意されているので自由に変えようと思うと少々めんどい

　【条件】
　　HTML5

※その他のフレームワーク
　・jQTouch（http://jqtouch.com/）
　・Sencha Touch（http://www.extjs.co.jp/products/touch/）
　・iUi（http://code.google.com/p/iui/）


●jQuery Mobileのスクリプトファイルについて

「jQuery Mobileのスタイルシート」「jQueryのスクリプトファイル」「jQuery Mobileのスクリプトファイル」の3つのファイルをHTMLの

head要素内で読み込んで利用します
呼び出しは、CDNからの呼び出し（webのURL呼び出し（http～のリンク））でも、ローカルファイル呼び出し（通常のcssファイルなどのよ

うに「.jsファイル」を準備して呼び出してつかう）の2種類がある。
※ファイルとして用意していた場合のメリット
　・URL呼び出し先サーバーが落ちても問題ない
　・最初に呼び出してしまえばその後ローカル環境でも使える

▼呼び出しは、CDNからの呼び出し

以下をヘッダに記述。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

※バージョン別記述方法、
1. jQuery Mobile用のスタイルシート
http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.css
2. jQueryのスクリプト
http://code.jquery.com/jquery-バージョン.min.js
3. jQuery Mobileのスクリプト
http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.js


▼ローカルファイル呼び出し

以下のサイトからDL。
http://jquery.com/

必要なファイル： 
    jquery.mobile-1.0a4.1.css
    jquery.mobile-1.0a4.1.min.css
    jquery.mobile-1.0a4.1.js
    jquery.mobile-1.0a4.1.min.js
    imagesフォルダ
※拡張子の前に「.min」が付いているファイルは、変数名を短くし、コメントや空白、改行を削除してファイルサイズを抑えた圧縮版です

、通常は圧縮版のファイルを使いましょう。imagesフォルダはスタイルシートから参照されるので、CSSファイルと同じフォルダに配置しま

す（CSSが/cssなら/css/images）。

●HTMLソース記述方法

<html>
    <head>
    ……必要なヘッダーのタグ……
    ……jQuery Mobile関連のタグ……
    </head>
    <body>
        <div id="home" data-role="page">
            ……ここに1ページ分の表示内容を用意（ヘッダ・コンテンツ・フッタを記載）…… 

	    <div data-role="header">
		……ヘッダー部分の表示……
	    </div>
	    <div data-role="content">
        	……ここに用意するコンテンツの内容……
	    </div>

       </div>

    </body>
</html>




★ページの単位、

　通常　　　　 ：1ページ＝1HTMLファイル。
　jQuery Mobile：1ページ＝<div id="index" data-role="page">～</div>

▼1つのHTMLに複数のページのコンテンツをまとめて記述する、ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義。（1HTMLファイル内にいくつもページを作れる）

・ページの作成　data-role="page"
　<div id="home" data-role="page">
※idはファイル名というイメージ（ページ内リンクのアンカーとして使用） 

・ヘッダーの表示　data-role="header"
　<div data-role="header"> 

・コンテンツの表示　data-role="content"（body部分）
　<div data-role="content">

・フッターの表示　data-role="footer"
　<div data-role="footer">
※data-role="page"を使った場合、一番最初のdivの内容しかページに表示されない。それ以外は別ページとして認識される。

▼ページ内リンクの方法

各ページへリンクを張るには、a要素のhref属性にページIDを記述
例: 
<a href="#page2" data-rel="dialog">ダイアログ</a>

※別のWebページにジャンプするには？

<a>タグはデフォルトだとページ内リンクしかできない。
別のWebページにジャンプするには、「data-ajax="false"」という属性を追加する。
例： 
<a href="next.html" data-role="button" data-ajax="false">go next</a>

●テーマ（スキン）

data-role="page"にdata-theme="テーマの種類"という属性を追加するとページ全体の色が変わる。
あらかじめ5種類用意してある。
指定なし
「a」――黒を基調としたテーマです。
「b」――青を基調としたテーマです。
「c」――グレーを基調としたテーマです。
「d」――白を基調としたテーマです。
「e」――黄色を基調としたテーマです。

例： 
<div id="home" data-role="page" data-theme="a">

 ……表示内容（ヘッダ・コンテンツ・フッタを記載）……

</div>
※jQuery Mobileの正式版リリース時には、テーマを簡単にカスタマイズできる「ThemeRoller」も提供される予定

●CSS

jQuery MobileのCSSは、「共通CSS」と「テーマCSS」の2つで構成されています。 
・共通CSSは、要素のサイズや間隔、余白など、ページの構造やレイアウトに関する設定が記述されており、すべてのテーマで共通して利用されます。
・テーマCSSは、data-theme属性で指定したテーマ（デフォルトでは「a」～「e」までの5種類）のスタイルを記述したCSSで、指定したテーマに対応する設定のみ適用
「jQuery Mobile1(基礎)」をウィキ内検索
最終更新：2012年04月24日 18:06
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。