ブログトップ 記事一覧 ログイン 無料ブログ開設

へっぽこプログラマーの日記 RSSフィード Twitter

2010-10-19

jQuery Mobile リファレンス的なもの

| 19:27 |

jQuery Mobile のリファレンス的なものを作りました。

取り敢えず叩き台で、ツッコミなどあればコメントください!

※RC2版に対応しました


Page

要素 属性 概要
div data-role page ページ

設定 既定 備考
data-fullscreen boolean false フルスクリーン表示(ヘッダーとフッターでdata-position="fixed"を指定する必要がある)
data-add-back-btn boolean false 戻るボタンの自動生成
data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト
data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する
data-dom-cache boolean false ページをキャッシュする
data-theme 任意 c テーマ(a-e)
data-back-btn-theme 任意 自動生成された戻るボタンのテーマ(a-e)
data-header-theme 任意 a ヘッダーのテーマ(a-e)
data-content-theme 任意 c コンテンツのテーマ(a-e)
data-footer-theme 任意 a フッターのテーマ(a-e)


Header

要素 属性 概要
div data-role header Pageに含めるヘッダー

設定 既定 備考
data-position inline *
fixed 固定ヘッダー
data-id 任意 同一のdata-idのヘッダーを持つページ同士の遷移では、ヘッダーを遷移エフェクトに含めずに表示状態のまま固定する(要data-position="fixed")
data-theme 任意 a テーマ(a-e)
class ui-bar - ヘッダーにUIを含める場合の適切なマージンを設定する


Content

要素 属性 概要
div data-role content Pageに含めるコンテンツ

設定 既定 備考
data-theme 任意 c テーマ(a-e)


Footer

要素 属性 概要
div data-role footer Pageに含めるフッター

設定 既定 備考
data-position inline *
fixed 固定フッター
data-id 任意 同一のdata-idのフッターを持つページ同士の遷移では、フッターを遷移エフェクトに含めずに表示状態のまま固定する(要data-position="fixed")
data-theme 任意 a テーマ(a-e)
class ui-bar - フッターにUIを含める場合の適切なマージンを設定する


Navigation Bar

要素 属性 備考
div data-role navbar Header、Footerに含めるナビゲーションバー

子要素として<ul>要素(<li>要素に各リンクを入れる)を定義する。

設定 既定 備考
data-iconpos *1 top パネルボタンのアイコンの位置


Page Link

要素 属性 概要
a - -

ページ遷移

リンク先のPage要素を#idで指定するか、URLを指定する。

別ドメインへのリンクか、以下のいずれかを指定すると、通常のリンクとなる。
rel="external"
target="[任意]"
data-ajax="false"

※ローカル環境での外部ファイルの読み込みはブラウザの制限で動作しない

設定 既定 備考
data-transition slide * ページ遷移のエフェクト
slideup
slidedown
pop
fade
flip
data-direction reverse 遷移エフェクトを逆にする
data-rel back ページを戻る
dialog 遷移先のページをダイアログ表示する
data-ajax boolean true 自動ajax
data-prefetch boolean false ページの事前読み込み


Dialog

要素 属性 概要
div data-role page <a>要素にdata-role="dialog"を指定する(Page Linkの項を参照)

設定 既定 備考
data-close-btn-text 任意 "Close" 閉じるボタンのツールチップ


Form

要素 属性 概要
form - - ajaxでformデータを送信する
送信先のページでページ要素を返す必要がある。

設定 既定 備考
data-ajax boolean true 自動ajax


Button

要素 属性 概要
input type button ボタン(type="image"の画象は無視される)
submit
reset
image
a data-role button
button - -

設定 既定 備考
data-corners boolean true ボタンを角丸にする
data-shadow boolean true ボタンに影をつける
data-icon arrow-l アイコン種類
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
search
home
data-iconpos left * アイコン位置(data-iconpos="notext"はアイコンのみの表示)
right
top
bottom
notext
data-iconshadow boolean true アイコンに影をつける
data-inline boolean false インライン要素として扱う
data-theme 任意 c テーマ(a-e)
data-disabled boolean false 有効/無効
data-role none ネイティブのUIを使う
class ui-btn-left Header要素内に配置したボタン位置
ui-btn-right
ui-btn-active 選択状態


Form Elements

要素 属性 備考
input type text テキスト
password パスワード
search 検索ボックス
range スライダー
radio ラジオボタン(<label>要素必須)
checkbox チェックボックス(<label>要素必須)
select data-role slider フリップスイッチ(<option>要素を2つ含める)
textarea - - テキストエリア

設定 既定 備考
data-role none ネイティブのUIを使う
data-theme 任意 c テーマ(a-e)
data-track-theme 任意 c スライダー(range)のトラック部分のテーマ
data-disabled boolean false 有効/無効

※各フォームにラベルを組み合わせると、画面幅が480px以上になった場合に自動的に2カラムに調整される


Select menus

要素 属性 備考
select - - セレクトメニュー
カスタムセレクトメニューを使う場合は、data-native-menu="false"を指定する。

すべてのオプションが画面に表示できる場合は、オプション一覧がオーバーレイ表示される。表示できない場合は、オプション一覧がダイアログ表示される。その場合、ラベルがオプション一覧ページのタイトルとなる。

valueが指定されていない<option>要素が見出しとなる。

<optgroup>でオプションのグループ化が可能。

設定 既定 備考
data-native-menu boolean false カスタムセレクトメニュー
data-corners boolean true ボタンを角丸にする
data-shadow boolean true ボタンに影をつける
data-icon *2 arrow-d アイコン種類
data-iconpos *3 right アイコン位置
data-iconshadow boolean true アイコンに影をつける
data-hide-placeholder-menu-items boolean false value属性のない<option>要素をプレースホルダーとしない

その場合、<option>要素にdata-placeholder="true"をプレースホルダーとする

data-close-text 任意 "Close" オプション一覧ページの閉じるボタンのツールチップ
data-inline boolean false インライン要素として扱う
data-theme 任意 c テーマ(a-e)
data-menu-page-theme 任意 c オプション一覧ページのテーマ(a-e)
data-overlay-theme 任意 c オプション一覧のテーマ(a-e)
data-role none ネイティブのUIを使う
data-disabled boolean false 有効/無効
multiple boolean false 複数選択


Fieldcontain

要素 属性 備考
div data-role fieldcontain 入力フォームとラベルを囲む。マージンとスプリッターを追加する


Control Group

要素 属性 概要
div data-role controlgroup グループ化する(ボタン、ラジオボタン、チェックボックス、セレクトメニュー)

設定 既定 備考
data-type vertical * 垂直方向で結合する
horizontal 水平方向で結合する


Grid Layout

要素 属性 備考
div class ui-grid-a class="ui-grid-a"〜"ui-grid-d"で2〜5列となる。子要素に<div>要素を含め、class="ui-block-a"〜"ui-block-e"で各列対応する。行は、対応する子要素を繰り返す。
ui-grid-b
ui-grid-c
ui-grid-d

設定 既定 備考
data-theme 任意 テーマ(a-e)


Collapsible block

要素 属性 備考
div data-role collapsible 開閉可能なブロック。見出しが必須(h1〜h6要素)
data-role:collapsible-setのdiv要素でグループ化することができる


設定 既定 備考
data-collapsed boolean true 初期表示を閉じた状態にする
data-theme 任意 c テーマ(a〜e)
data-icon-theme 任意 c アイコンのテーマ(a-e)


List

要素 属性 備考
ul data-role listview リスト

(List/Read-only List)

ol data-role listview 番号付きリスト

(Numbered List)

設定 既定 備考
data-inset boolean false 角丸リスト
data-filter boolean false 検索フィルタを追加する
data-filter-placeholder 任意 ... 検索フィルタのプレースホルダー
data-theme 任意 c テーマ(a〜e)
data-divider-theme 区切りリストのテーマ
data-count-theme カウントバブルのテーマ指定
data-split-theme 区切りボタンリストのテーマ指定
data-header-theme ヘッダーのテーマ指定
data-split-icon 任意 gear 区切りボタンリストのボタンアイコン


その他

オプション 条件 説明
リンクリスト

(Linked List)

リンク可能なリスト <li>要素内のすべての要素を<a>要素で囲む。data-icon属性でアイコンを指定可能
入れ子リスト

(Nested List)

リストが入れ子になっているリスト <li>要素内に<ul>/<ol>要素を含める。追加したリストにdata-role="listview"は不要
区切りボタンリスト

(Split button List)

リスト右側にパネルボタンを表示 <li>要素内に<a>要素を2つ含める
リスト見出し リストの見出しを表示する <li>要素にdata-role="list-divider"を指定する
カウントバブル リスト右側にカウントバブルを表示する <li>要素に<span class="ui-li-count">を含む
サムネイル リストに画像をサムネイル表示する <li>要素に<img>要素を含む
アイコン リストに画像をアイコン表示する <li>要素に<img class="ui-li-icon">要素を含む
見出しテキスト アイテムの見出しテキストを表示する <li>要素に<h1>〜<h6>要素を含む
詳細テキスト リストの詳細テキストを表示する <li>要素に<p>要素を含む
補足テキスト リストの右上に補足テキストを表示する <li>要素に<p class="ui-li-aside">要素を含む


2010/11/17 追記

collapsibleのdata-state属性がAlpha2でdata-collapsedに変更された。

2011/03/07 更新

alpha3に対応

2011/05/16 更新

alpha4.1に対応

2011/11/03更新

RC2版対応

*1:Buttonと同じ

*2:Buttonと同じ

*3:Buttonと同じ

ddandongneddandongne 2010/10/21 18:13 안녕하세요~ 이웃나라 한국에 사는 개발자입니다.
jQueryMobile 정보를 찾다가 여기까지 오게 되었네요.
좋은 정보를 공유해 주셔서 너무너무 감사 드립니다. ^^

pikoteapikotea 2010/10/22 11:31 Thank you for your response.
I'm glad to be of some help.

cruxcrux 2011/02/01 21:32 とても参考になりました。ありがとうございました。

pikoteapikotea 2011/02/02 13:40 cruxさん、コメントありがとうございます。
若干情報が古くなってきましたので、Alpha3がリリースされたら更新したいと思いますので、また宜しくお願いします!

toritori 2011/02/05 18:43 すごく簡潔にまとめられており、とても見やすかったです!
ありがとうございました。すごく助かったですm(__)m

pikoteapikotea 2011/02/07 22:11 toriさんありがとうございます。
Alpha3対応版も今しばらくお待ちを!

nokonoko777nokonoko777 2011/02/24 12:34 ちょうど勉強してたんで助かります。ありがとうございます。

pikoteapikotea 2011/03/06 23:53 nokonoko777さんコメントありがとうございます。
Alpha3に対応させましたので是非ご活用ください。

yo-11-06yo-11-06 2011/03/16 21:29 headerに関してですが
「data-back-btn」ではなく「data-backbtn」みたいです!



@ alpha3

pikoteapikotea 2011/03/18 23:22 yo-11-06さんご指摘ありがとうございます。修正しました!

hotmilk525hotmilk525 2011/05/25 18:38 いつも参考にさせて頂いております。
1点だけ、気付いた箇所がありましたので報告させて頂きますね。

「Header」の「data-position:fixed」の説明が「画面下部で固定表示」とありますが、「画面上部」の誤りかと思います。
よろしくお願い致します。

pikoteapikotea 2011/05/27 13:34 hotmilk525さんご指摘ありがとうございます!修正しました。
ちなみに、ページ間固定ヘッダー、フッターはまだ動きが怪しいので注意を!