jQuery Mobile サイト全体の動作を規定するグローバル設定

jQuery Mobile では、グローバル設定と呼ばれるサイト全体の動作を規定するためのパラメータが用意されています。この記事ではグローバル設定にはどんな項目があるかと、その変更方法について解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. グローバル設定の概要と設定変更の方法
  2. 設定オプションの一覧
  3. 設定の変更例

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

グローバル設定の概要と設定変更の方法

jQuery Mobile では初期化の際、ウィジェットに対するマークアップなど、ページの挙動を設定する処理を行っています。初期化処理をする際には、グローバル設定というサイト全体の動作を規定するためのパラメータを参照します。したがって動作をカスタマイズしたいなら、グローバル設定がもつ設定オプションの値を変更します。

設定オプションの変更は、JavaScriptで行うことができます。
具体的には、jQuery Mobile のコアオブジェクトである「$.mobileオブジェクト」のプロパティにアクセスし値を設定します。

設定を変更するタイミングは、「mobileinitイベント」を利用します。
mobileinitイベントは jQuery Mobile が読み込まれるとすぐに呼び出されるイベントです。

mobileinitイベントリスナーを記述する場所は、jQuery本体を読み込んだ後 jQuery Mobile が読み込まれる前です。
したがって mobileinitイベントリスナーを記述した jsファイルを「custom-setting.js」とすると以下の順番になります。

変更するには、以下のように $.mobileオブジェクトのプロパティに値を設定します。

あるいは jQuery の $.extendメソッドを使って以下のようにまとめて記述することもできます。

設定オプションの一覧

グルーバル設定の設定オプションである $.mobileオブジェクトの主なプロパティは以下になります。

はバージョン1.4で非推奨

プロパティ デフォルト 説明
activeBtnClass string "ui-btn-active" アクティブになったボタンに適用されるクラス。
activePageClass string "ui-page-active" アクティブになったページに適用されるクラス。
ajaxEnabled boolean true 通信をAjaxで行うかどうか。
allowCrossDomainPages boolean false クロスドメイン間での通信を許可するかどうか。
autoInitializePage boolean true ページの初期化を行うかどうか。
buttonMarkup.hoverDelay integer 200 タッチしたときのhoverの時間設定。この値を小さくするとタッチの反応は良くなるがスクロール時に問題が起きる場合がある。
defaultDialogTransition string "pop" ダイアログを表示したときのトランジション効果。
defaultPageTransition string "fade" ページ遷移したときのトランジション効果。
degradeInputs object input要素のtype属性を変換する指定。
dynamicBaseEnabled boolean true base要素をサポートするかどうか。
focusClass string "ui-focus" フォーカスした要素に適用されるクラス。
hashListeningEnabled boolean true ハッシュ変更の監視を行うかどうか。trueのときはハッシュが変更時に指定されたページへ遷移する。ページ内遷移などを自分で制御したい場合はfalseにする。
ignoreContentEnabled boolean false jQuery Mobile で初期化をしない要素を設けるかどうか。trueにすると「data-enhance="false"」を指定した要素は初期化を行わない。
keepNative Selector :jqmData(role='none'), :jqmData(role='nojs') ブラウザに実装されているスタイルを適用する要素を指定。
linkBindingEnabled boolean true アンカーリンクのクリックをバインドする処理をするかどうか。
maxTransitionWidth integer, boolean false ページ遷移をするときにトランジション効果を適用する画面の最大幅。
minScrollBack integer, 0 ページに戻ったときにスクロール位置を記憶する最小距離。
ns string "" 名前空間の設定。データ属性の名前を変更する場合に用いる。
pageLoadErrorMessage string "Error Loading Page" Ajax通信でページロードに失敗したときに表示するエラーメッセージ。
pageLoadErrorMessageTheme string "a" エラーメッセージボックスが使用するテーマ。
phonegapNavigationEnabled boolean false window.history.backを呼び出す際、PhoneGapナビゲーションヘルパーに置き換える設定。
pushStateEnabled boolean true falseに設定するとAjax通信ではなく通常のページ遷移になる。
subPageUrlKey string "ui-page" ウィジェットがサブページを生成する際のURLパラメータの指定。
transitionFallbacks.[transition] string "fade" トランジション効果のフォールバック設定。

設定の変更例

ロードエラーメッセージの変更

デフォルトではページ読み込みに失敗すると、"Error Loading Page" と英語でメッセージが表示されます。これを日本語メッセージに変更してみます。
またメッセージボックスのテーマもスウォッチ "a" で目立ちませんので、スウォッチ "b" に変更します。

サンプルコードは以下になりますが、存在しないページへのリンクをクリックするとタイムアウト後にエラーメッセージが表示されます。

指定した要素に jQuery Mobile のスタイルを適用しない

input要素のボタンにはデフォルトで jQuery Mobile のスタイルが適用されます。これを指定した要素には適用されないようにしてみます。

keepNativeプロパティには、jQuery Mobile のスタイルを適用せずブラウザネイティブのスタイルを適用するルールが設定されていますので、この値を変更します。

以下のコードでは、「type="submit"」を指定した送信ボタンと、no-jqmクラスを指定した要素に対して適用除外としています。

グローバル設定はサイト全体に影響する設定ですので、jQuery Mobile でサイト制作する際には最初にここをしっかり決めておく必要があります。サイト全体→ページ→ウィジェットと、階層を掘り下げるにしたがってどういう設定コンセプトでいくか基本設計時に決めておきましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ