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

公開日：2014年10月27日
最終更新日：2014年11月9日

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

«次の特集記事» jQuery Mobile ウィジェットのオプションを JavaScriptで設定する
«前の特集記事» jQuery Mobile ページイベントの種類・発生タイミングと利用例

【コンテンツ】

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

【記事執筆時の環境】
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」とすると以下の順番になります。

<script src="jquery.js"></script>
<script src="custom-setting.js"></script>
<script src="jquery.mobile.js"></script>

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

$(document).on("mobileinit", function() {
	$.mobile.[プロパティ] = 値;
});

$(document).on("mobileinit", function() {

$.mobile.[プロパティ] = 値;

});

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

$(document).on("mobileinit", function() {
	$.extend($.mobile, {
		プロパティ1: 値,
		プロパティ2: 値,
		プロパティ3: 値
	});
});

$(document).on("mobileinit", function() {

$.extend($.mobile, {

プロパティ1: 値,

プロパティ2: 値,

プロパティ3: 値

});

設定オプションの一覧

グルーバル設定の設定オプションである $.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" に変更します。

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Mobile Tips</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
	$.extend($.mobile, {
		pageLoadErrorMessage: "ページ読み込みに失敗しました",
		pageLoadErrorMessageTheme: "b"
	});
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.ui-header .ui-title {
	margin: 0 10px;
}
.ui-footer {
	font-size: 13px;
	text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="main">
	<div data-role="header">
		<h1>DEMOページ メイン</h1>
	</div>
	<div role="main" class="ui-content">
		<p><a href="demo35-1b.html">サブページへ遷移(正常) &raquo;</a></p>
		<p><a href="demo35-1c.html">サブページへ遷移(エラー) &raquo;</a></p>
	</div>
	<div data-role="footer">
		<p>&copy; 2014 Web Tips アーカイブ</p>
	</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Mobile Tips</title>

$(document).on("mobileinit", function() {

$.extend($.mobile, {

pageLoadErrorMessage: "ページ読み込みに失敗しました",

pageLoadErrorMessageTheme: "b"

});

</script>

.ui-header .ui-title {

margin: 0 10px;

}

.ui-footer {

font-size: 13px;

text-align: center;

}

</style>

</head>

<body>

<h1>DEMOページメイン</h1>

</div>

<p><a href="demo35-1b.html">サブページへ遷移(正常) »</a></p>

<p><a href="demo35-1c.html">サブページへ遷移(エラー) »</a></p>

</div>

</div>

</body>

</html>

DEMOページへ »

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Mobile Tips</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
	$.mobile.keepNative = 'input[type="submit"], .no-jqm';
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.ui-header .ui-title {
	margin: 0 10px;
}
.ui-footer {
	font-size: 13px;
	text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="main">
	<div data-role="header">
		<h1>DEMOページ</h1>
	</div>
	<div role="main" class="ui-content">
		<input type="button" value="フォームボタン" class="no-jqm">
		<input type="button" value="フォームボタン">
		<input type="submit" value="送信ボタン">
	</div>
	<div data-role="footer">
		<p>&copy; 2014 Web Tips アーカイブ</p>
	</div>
</div>
</body>
</html>