jQuery Mobile ウィジェットのオプションを JavaScriptで設定する

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

jQuery Mobile ではウィジェットのスタイルや振る舞いを規定するためにさまざまなオプションを設定しますが、データ属性やクラスを付加するのではなく、JavaScript で設定する方法について解説します。

«次の特集記事» jQuery Mobile ThemeRollerでカスタムテーマを作成する
«前の特集記事» jQuery Mobile サイト全体の動作を規定するグローバル設定

【コンテンツ】

オプション設定の方法
メソッドを使う方法のサンプル
$.mobileオブジェクトを使う方法のサンプル

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

オプション設定の方法

ウィジェットに対してオプション設定などの操作を加えるには、これまではデータ属性やクラスを付加してきました。jQuery Mobile の提供する API を利用すれば、オプション設定は JavaScript でも行うことができます。Webサイト全体でウィジェットに対し同じ設定をする場合には、JavaScriptのコードを組んで初期化時に実行するようにしておいたほうが効率的です。

ウィジェットにオプションを設定する方法は２つあります。

１つはウィジェットを操作するメソッドを使う方法で、以下の書式で記述します。

$("セレクタ").ウィジェット名({ オプション名: 値 });

そしてもう１つは、$.mobileオブジェクトのプロパティに設定する方法で、以下の書式で記述します。

$.mobile.ウィジェット名.prototype.options.オプション名 = 値;

メソッドを使う方法のサンプル

ナビゲーションバーとリストビューにメソッドを使ってオプション設定してみます。
ナビゲーションバーのアイコン位置をボトムへ変更し、リストビューをインセットリストに変更します。

JavaScriptコードは pagebeforecreateイベントリスナーとして記述します。

<!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 src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate", function() {
	$('[data-role="navbar"]').navbar({ iconpos: "bottom" });
});
$(document).on("pagebeforecreate", function() {
	$('[data-role="listview"]').listview({ inset: true });
});
</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="home">
	<div data-role="header">
		<h1>DEMO ページ</h1>
	</div>
	<div role="main" class="ui-content">
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="home" class="ui-btn-active">ホーム</a></li>
				<li><a href="#" data-icon="user">プロフィール</a></li>
				<li><a href="#" data-icon="mail">問い合わせ</a></li>
			</ul>
		</div>
		<ul data-role="listview">
			<li><a href="#">徳島</a></li>
			<li><a href="#">香川</a></li>
			<li><a href="#">愛媛</a></li>
			<li><a href="#">高知</a></li>
		</ul>
	</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("pagebeforecreate", function() {

$('[data-role="navbar"]').navbar({ iconpos: "bottom" });

});

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

$('[data-role="listview"]').listview({ inset: true });

});

</script>

.ui-header .ui-title {

margin: 0 10px;

}

.ui-footer {

font-size: 13px;

text-align: center;

}

</style>

</head>

<body>

</div>

<ul>

<li><a href="#" data-icon="user">プロフィール</a></li>

<li><a href="#" data-icon="mail">問い合わせ</a></li>

</ul>

</div>

</ul>

</div>

</div>

</body>

</html>

DEMOページへ »

$.mobileオブジェクトを使う方法のサンプル

メソッドを使った場合と同様の設定を、$.mobileオブジェクトを使った方法で記述してみます。

JavaScriptコードは mobileinitイベントリスナーとして記述しますが、記述する場所が jQuery Mobile を読み込む前ですので注意してください。

<!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.navbar.prototype.options.iconpos = "bottom";
	$.mobile.listview.prototype.options.inset = true;
});
</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="home">
	<div data-role="header">
		<h1>DEMO ページ</h1>
	</div>
	<div role="main" class="ui-content">
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="home" class="ui-btn-active">ホーム</a></li>
				<li><a href="#" data-icon="user">プロフィール</a></li>
				<li><a href="#" data-icon="mail">問い合わせ</a></li>
			</ul>
		</div>
		<ul data-role="listview">
			<li><a href="#">徳島</a></li>
			<li><a href="#">香川</a></li>
			<li><a href="#">愛媛</a></li>
			<li><a href="#">高知</a></li>
		</ul>
	</div>
	<div data-role="footer">
		<p>&copy; 2014 Web Tips アーカイブ</p>
	</div>
</div>
</body>
</html>