jQuery Mobile逆引きリファレンス

jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載。バージョン1.4以降に対応。【完結】

  • このエントリーをはてなブックマークに追加
jQuery Mobileを利用するには?

jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ/タブレット環境と、jQuery Mobileページの基本構造を説明する。

分類ウィジェット名Tips
基本 (標準機能) 基本的なページを定義
(標準機能) テーマを設定(&ThemeRollerによる自作テーマ)
(標準機能) ハイパーリンクを設置
Loader ローディング表示をカスタマイズ
Toolbar ヘッダー/フッターの表示をカスタマイズ
Navbar ナビゲーションバー
(標準機能) ページの描画を高速化
フォーム (標準機能) 入力フォームを設置
Textinput テキスト入力ボックスを設置
Checkboxradio ラジオボタン/チェックボックス
Flipswitch オン/オフ選択のためのフリップスイッチ
Selectmenu 選択メニュー
Button ボタンを配置
Button アイコン付きのボタンを配置
Slider スライダー
ポップアップ Popup ポップアップを表示
Popup 画像ボックスやダイアログなど
パネル Panel 左右からスライド表示
Collapsible 開閉可能なパネル
Collapsibleset 開閉可能パネルを束ねたアコーディオンパネル
Tabs タブパネル
テーブル&
グリッドレイアウト
Table レスポンシブルなテーブル(Column toggle編)
Table レスポンシブルなテーブル(Reflow編)
(標準機能) 複数列からなるグリッドレイアウト
リスト ListView ネイティブアプリ・ライクなリストビュー
ListView 階層型リスト
ListView 作成したリストに区切り線を追加
ListView アイコン付き、カウントバブル付きのリストビュー
フィルター Filterable リスト/テーブルなどに検索機能を付与
Filterable 検索ルールをカスタマイズ
スクリプト (標準機能) 動作パラメーターを設定
(標準機能) パス/URLの情報を取得/操作
(標準機能) フォーム要素を操作
Pagecontainer jQuery Mobileページの移動を制御
(標準機能) 端末の縦横回転時にレイアウトを調整
イベント Pagecontainer ページのロード/切り替え時に初期化/後処理を実行
(標準機能) ページレイアウト変化時に処理を実行
(標準機能) スクロール時に追加的にコンテンツを読み込む
jQuery Mobileの主なウィジェットや機能と、対応するTIPS
jQuery Mobileで基本的なページを定義するには?

基本的なページを作成する方法を解説。要素のid値を振る際の注意点と、1つのファイルで複数ページを管理する方法についても説明。

jQuery Mobileのテーマを設定(&ThemeRollerによる自作テーマ作成)するには?

サイトデザインを管理できる「テーマ」と「スウォッチ」の基本的な利用法を解説。

jQuery Mobileページでヘッダー/フッターの表示をカスタマイズするには?

ヘッダー/フッターを作成する方法を解説。また、ヘッダー/フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。

jQuery Mobileページでハイパーリンクを設置するには?

jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。

jQuery Mobileページでローディング表示をカスタマイズするには?

jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。

jQuery Mobileページにボタンを配置するには?

jQuery Mobileページでボタンを設置するには、<button>/<a>/<input>要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。

jQuery Mobileページでアイコン付きのボタンを配置するには?

jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。

Navbarウィジェットでナビゲーションバーを作成するには?

アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。

Tabsウィジェットでタブパネルを作成するには?

パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。

Panelウィジェットで左右からスライド表示するには?

左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。

Popupウィジェットでポップアップを表示するには?

ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。

Popupウィジェットで画像ボックスやダイアログなどを作成するには?

ダイアログ/画像ボックス/ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。

Tableウィジェットでレスポンシブルなテーブルを作成するには?(Column toggle編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(列を選択的に表示するColumn toggleモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

Tableウィジェットでレスポンシブルなテーブルを作成するには?(Reflow編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(テーブル/連票と表示形式そのものを切り替えるReflowモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

Collapsibleウィジェットで開閉可能なパネルを作成するには?

タイトル領域をクリックすることでコンテンツ本体の表示/非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。

Collapsiblesetウィジェットで開閉可能なパネルを作成するには?

コンテンツ本体の表示/非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。

jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには?

標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。

Checkboxradioでラジオボタン/チェックボックスを作成するには?

標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。

Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?

オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。

Selectmenuウィジェットで選択メニューを作成するには?

複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。

jQuery Mobileで入力フォームを設置するには?

jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。

Textinputウィジェットでテキスト入力ボックスを設置するには?

jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。

ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには?

<ul>/<li>要素や<ol>/<li>要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。

ListViewウィジェットで階層型リストを作成するには?

初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。

ListViewウィジェットで作成したリストに区切り線を追加するには?

リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー(=区切り線)を使用する。その追加方法を説明する。

ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには?

ListViewウィジェットを使って作成したリストに対して、サムネイル/アイコン画像やカウントバブル、見出し/補足情報を追加する方法を説明する。

Filterableウィジェットでリスト/テーブルなどに検索機能を付与するには?

リストやテーブル、ボタングループ/選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。

Filterableウィジェットによる検索ルールをカスタマイズするには?

リスト/テーブルなどに検索機能を不要できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。

Sliderウィジェットで、スライダーを作成するには?

つまみをスライドして値を簡単に選択できるスライダーを作成するためのSliderウィジェットの基本的な使い方を説明する。

jQuery Mobileの動作パラメーターを設定するには?

jQuery Mobileやウィジェットの動作を変更できる「動作パラメーター」の基本的な使い方を解説する。

$.mobile.pathオブジェクトでパス/URLの情報を取得/操作するには?

パスやURLを取得/操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。

JavaScriptからフォーム要素を操作するには?

フォーム関連を自前で記述する場合、jQueryの知識を生かせるが、jQuery Mobile固有の注意点もある。その注意点を解説する。

JavaScriptからjQuery Mobileページ間の移動を制御するには?

通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。

ページのロード/切り替え時に初期化/後処理を実行するには?

ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。

ページレイアウトが変更したときに処理を実行するには?

ウィジェットのレイアウト状態が変化したとき(例えば開閉パネルが開いた/閉じたときなどに)、処理を実行する方法を説明する。

data-defaults/data-enhanced属性でページの描画を高速化するには?

jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。

スクロール時に追加的にコンテンツを読み込むには?

スクロールの開始/終了のタイミングで発生するscrollstart/scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。

モバイル端末を縦横回転させたときにレイアウトを調整するには?

端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!