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ページでヘッダー/フッターの表示をカスタマイズするには?
ヘッダー/フッターを作成する方法を解説。また、ヘッダー/フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
jQuery Mobileページでローディング表示をカスタマイズするには?
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
jQuery Mobileページにボタンを配置するには?
jQuery Mobileページでボタンを設置するには、<button>/<a>/<input>要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
jQuery Mobileページでアイコン付きのボタンを配置するには?
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
Navbarウィジェットでナビゲーションバーを作成するには?
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
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ウィジェットを使って作成したリストに対して、サムネイル/アイコン画像やカウントバブル、見出し/補足情報を追加する方法を説明する。
Filterableウィジェットでリスト/テーブルなどに検索機能を付与するには?
リストやテーブル、ボタングループ/選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
$.mobile.pathオブジェクトでパス/URLの情報を取得/操作するには?
パスやURLを取得/操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
JavaScriptからjQuery Mobileページ間の移動を制御するには?
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
data-defaults/data-enhanced属性でページの描画を高速化するには?
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
スクロール時に追加的にコンテンツを読み込むには?
スクロールの開始/終了のタイミングで発生するscrollstart/scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
モバイル端末を縦横回転させたときにレイアウトを調整するには?
端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。