jQuery Mobile例文辞典 (1.1RC1)

このページはjQuery Mobileの用例/サンプルを扱っています。ここではjQuery Mobile 1.1RC1を使用しています。
●印は1.1で追加された項目を示しています。
★印は1.1で変更された項目を示しています。
☆印は1.0とは異なる動作になったものを示しており、修正が必要な項目です。

また、$.mobile.touchOverflowEnabledが非推奨になりました。ベースとなるjQueryのバージョンは1.6.4と1.7.1の両方に対応しています。
1.1.0RC1変更点 (jQuery Mobile公式ブログ)

*勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。


Last update:2012/2/29 AM 4:59

ページレイアウト/ページ構成

  1. ページのコンテンツ領域を指定する
  2. 複数のページを用意する
  3. ページのヘッダー領域を指定する
  4. ページのフッター領域を指定する
  5. フッターを固定する
  6. 共通の固定フッターを設定する
  7. フルスクリーン(全画面)モードにする

ページリンク/ページ移動

  1. 同じHTMLファイル名にあるページに移動する
  2. 外部のページに移動する
  3. ヘッダーに前のページに戻るボタンをつける
  4. 戻るボタンに表示される文字を変更する
  5. ヘッダーにナビゲーションボタンを配置する
  6. フッターに複数のボタンを配置する
  7. フッターにナビゲーションボタンを配置する
  8. ページ移動時の切り替え方法を指定する(★1.1で変更あり)
  9. ページ移動時の切り替え方向を逆方向にする(☆1.1では要修正)

テーマ(外観)

  1. ページ全体のテーマ(外観)を指定する
  2. 特定の部分のみテーマ(外観)を指定する

ダイアログ

  1. ダイアログを表示する
  2. ダイアログの表示方法を指定する

入力フォーム

  1. スライダーを表示する
  2. スライダー値のステップ(間隔)を指定する(●1.1で追加)
  3. スライダーのバーをハイライト表示する(●1.1で追加)
  4. 小さいスライダーにする(●1.1で追加)
  5. フリップスイッチを表示する
  6. 小さいフリップスイッチにする(●1.1で追加)
  7. ラジオボタンを表示する
  8. ラジオボタンを水平に表示する
  9. 小さいラジオボタンにする(●1.1で追加)
  10. チェックボックスを表示する
  11. チェックボックスを水平に表示する
  12. 小さいチェックボックスにする(●1.1で追加)
  13. セレクトメニューを表示する
  14. セレクトメニューをjQuery Mobile独自のものにする
  15. カスタムセレクトメニューのタイトルを設定する
  16. ネイティブのフォームとして表示する
  17. ボタンの幅を文字数に合わせる
  18. ボタンに表示されるアイコンの位置を指定する

ボタン

  1. リンク(a要素)をボタン形状にする
  2. ×印がついたボタン(キャンセルボタン)を表示する
  3. チェックマークがついたボタンを表示する
  4. 歯車マーク(オプション/設定)がついたボタンを表示する
  5. ヘッダーにあるボタンを右側に表示する
  6. 四角いボタン形状にする
  7. ボタンに左または右の矢印アイコンを表示する
  8. ボタンに上または下の矢印アイコンを表示する
  9. ボタンに×印のアイコンを表示する
  10. ボタンに+印のアイコンを表示する
  11. ボタンに-印のアイコンを表示する
  12. ボタンにチェックマークのアイコンを表示する
  13. ボタンに歯車(設定)マークのアイコンを表示する
  14. ボタンに更新マークのアイコンを表示する
  15. ボタンに前後移動のアイコンを表示する
  16. ボタンにグリッドアイコンを表示する
  17. ボタンにスター(★)アイコンを表示する
  18. ボタンにアラート(警告)アイコンを表示する
  19. ボタンにインフォーメーション(情報)アイコンを表示する
  20. ボタンにホーム(家)アイコンを表示する
  21. ボタンに検索(虫眼鏡)アイコンを表示する
  22. ボタンサイズを表示する文字幅にあわせる
  23. ボタンをグループ化する
  24. ボタングループを水平に表示する

リスト

  1. リストを表示する
  2. リスト(入れ子/ネスト)を表示する
  3. 分割リストを表示する
  4. 角丸の立体的なリストを表示する
  5. リスト項目を区切る見出しを表示する
  6. リスト項目を区切る見出しのテーマを表示する
  7. 分割リストのアイコンを設定する
  8. リストの右上に文字を表示する
  9. 数値(カウントバブル)を表示する
  10. 数値(カウントバブル)のテーマを設定する
  11. リスト項目に画像を入れる
  12. 検索フィルタを表示しリスト項目を検索できるようにする
  13. 検索フィルタエリア内に任意の文字を表示する

パネル

  1. 開閉パネルを表示する
  2. 開閉パネルを最初から展開して表示する
  3. アコーディオンパネルを表示する

グリッド(整列)

  1. ページを左右2つの領域に分割する
  2. ページを3つ(左中右)の領域に分割する
  3. ページを4つの領域に分割する
  4. ページを5つの領域に分割する