jQuery Mobile例文辞典 (1.3.0RC1)

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

jQuery Mobile 1.3.0 RC1 Released (jQuery Mobile公式ブログ)

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


Last update:2013/2/6 AM 0:12

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

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

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

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

テーマ(外観)

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

ダイアログ

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

ポップアップ

  1. ポップアップを表示する(○1.2.0αで追加)
  2. ウィンドウ中央にポップアップを表示する(○1.2.0αで追加)

入力フォーム

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

ボタン

  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. アコーディオンパネルを表示する
  4. パネルウィジェットを表示する(▲1.3.0βで追加)
  5. パネルウィジェットの表示位置を指定する(▲1.3.0βで追加)
  6. パネルウィジェットの切り替え方法を指定する(▲1.3.0βで追加)

グリッド(整列)

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

グローバル設定

  1. 検索の×ボタンのツールチップの文字を設定する(◎1.1.0RC2で追加)