jQueryMobile初期化

イベント処理ページ等でページの初期化についてはすでにご紹介しましたが、今回はjQueryMobile本体の初期化(mobileinit)についてご紹介します。 mobileinitイベントはjQueryMobile本体が読み込まれた際に発生するイベントで、jQueryMobileの各種初期設定の変更(初期値の上書き)ができます。
また、jQueryMobile本体が読み込まれる前に宣言する必要があるので、mobileinitイベントを記述したjs外部ファイルは必ずHTMLのhead内のjQuery本体とjQueryMobile本体の間において読み込ませてください。
※詳しい説明などは他サイト・書籍を見てください。

 

jQueryMobileのデザインを使用しない(data-enhance="false")



画像1

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>sample</h1>
									</div>
									<div data-role="content">
										<!---jQueryMobileのデザイン使う----->
										<p>■jQueryMobileのデザイン使う</p>
										<div data-role="fieldcontain">
											<input id="test" type="radio" checked>
											<label for="test">ラジオボタン</label>
										</div>
										<input type="button" value="ボタン" >

										<p>&nbsp;</p>

										<!---jQueryMobileのデザイン使わない----->
										<div data-enhance="false">
											<p>■jQueryMobileのデザイン使わない</p>
											<div data-role="fieldcontain">
												<input id="test" type="radio" checked>
												<label for="test">ラジオボタン</label>
											</div>
											<input type="button" value="ボタン" >
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(document).on("mobileinit", function() {
							$.mobile.ignoreContentEnabled = true;
						});
					

 

まず上記のtest1.js外部ファイルを用意し、head内のjQuery本体とjQueryMobile本体の間にtest1.jsを置き読み込ませます。

※ test1.jsコード内の「.on()」はjQuery1.7より新たに追加されたAPIで、「.bind() / .live() / .delegate()」と同じです。使い方も同じですが、「.on()が推奨」となっているみたいなので使いました。

次にjQueryMobileが初期化を行わない(独自のデザインにしない)部分をつくるには、上記HTMLコード29~39行目のように
data-enhance="false"を追加したdivで囲みます。
画像1のように囲まれた部分はjQueryMobile独自のデザインが適用されていません。

※ data-enhance属性は$.mobile.ignoreContentEnabledがtrueの時に使えるので、必ず「$.mobile.ignoreContentEnabled = true;」を設定してください。


 

 

戻るボタン自動追加



画像2:トップページ(home)

画像3:下層ページ(page2)

画像4:階層化リスト

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<!---home---------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>home</h1>
									</div>
									<div data-role="content">
										<a href="#page2" type="button">page2へ</a>
										<p>&nbsp;</p>
										<!---階層化リスト---->
										<ul data-role="listview">
											<li>page2
												<ul data-role="listview">
													<li><a href="#page2">page2へ</a></li>
													<li><a href="#">test</a></li>
													<li><a href="#">test</a></li>
												</ul>
											</li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
										</ul>
									</div>
								</div><!---homeここまで--->

								<!---page2---------------------->
								<div id="page2" data-role="page">
									<div data-role="header">
										<h1>page2</h1>
									</div>
									<div data-role="content">
										<p>ページ2です。</p>
									</div>
								</div><!---page2ここまで--->
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(document).on("mobileinit", function(){
							//戻るボタン追加
							$.mobile.page.prototype.options.addBackBtn="true";
							//戻るボタンのテキスト変更
							$.mobile.page.prototype.options.backBtnText="aaa";
							//戻るボタンのテーマ変更
							$.mobile.page.prototype.options.backBtnTheme="e";
						});
					

※上記のtest1.js外部ファイルを用意し、head内のjQuery本体とjQueryMobile本体の間にtest1.jsを置き読み込ませます。

 

通常、戻るボタンは自動的にヘッダーに追加されないので、
使う場合は下層ページのヘッダーに「戻るボタン」をいちいち記述して追加していく必要がありますが、
「$.mobile.page.prototype.options.addBackBtn="true";」を使うと
下層ページのヘッダーに「戻るボタン」を自動追加することができます。
階層化リストのヘッダーにも自動的に追加されます。

またデフォルトでは、戻るボタンのテキストは「Back」ですが、
「$.mobile.page.prototype.options.backBtnText」を使用するとテキストを変更できます。
テーマを変更したい場合は「$.mobile.page.prototype.options.backBtnTheme」でテーマを設定します。

今回はテキトーにテキストを「aaa」、テーマを「e(黄色)」にしました。


 

 

全ページのテーマ一括設定



画像5

画像6

画像7

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<!---home--------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>home</h1>
									</div>
									<div data-role="content">
										<p>sampleリスト</p>
										<ul data-role="listview">
											<li><a href="#">menu1</a></li>
											<li><a href="#">menu2</a></li>
											<li><a href="#">menu3</a></li>
											<li><a href="#">menu4</a></li>
											<li><a href="#">menu5</a></li>
										</ul>
										<p>&nbsp;</p>
										<p>sampleボタン</p>
										<a href="#page2" data-role="button" >page2へ</a>
									</div>
									<div data-role="footer">
										<h1>勝手にスマホサイトまとめ</h1>
									</div>
								</div>

								<!---page2--------------------->
								<div id="page2" data-role="page">
									<div data-role="header">
										<h1>page2</h1>
									</div>
									<div data-role="content">
										<p>こんにちは</p>
										<p>ページ2です。</p>
									</div>
									<div data-role="footer">
										<h1>勝手にスマホサイトまとめ</h1>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(document).on("mobileinit",function(){
							//ヘッダーテーマ
							$.mobile.page.prototype.options.headerTheme="e";
							//コンテンツテーマ
							$.mobile.page.prototype.options.contentTheme="d";
							//フッターテーマ
							$.mobile.page.prototype.options.footerTheme="b";
						});
					

 

【test2.jsファイルに記述するコード】

						$(document).on("mobileinit", function(){
							//全体テーマ
							$.mobile.page.prototype.options.theme="e";
						});
					

 

各ページのヘッダーとかに「data-theme="テーマ"」を追加して
いちいちテーマ設定しなくても、全ページ一括でテーマを設定できる方法があります。

まず、test1.jsをhead内に読み込ませます。
ヘッダー、コンテンツ、フッター部分のテーマ設定をする場合
$.mobile.page.prototype.options.」のあとに
headerTheme="テーマ";」「contentTheme="テーマ";」「footerTheme="テーマ";
を設定することでできます(画像5)。
また全ページに適用されます(画像6)。

次に、head内のtest1.jsを削除し、test2.jsを読み込ませます。
ページ全体のテーマを設定する場合は
$.mobile.page.prototype.options.theme="テーマ";」で設定できます(画像7)。

 

 

リストビューの一括設定



画像8

画像9

画像10

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
							</head>
							<body>
								<!---home--------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>home</h1>
									</div>
									<div data-role="content">
										<p>sampleリスト1</p>
										<ul data-role="listview">
											<li data-role="list-divider">sampleリスト1</li>
											<li><a href="#">menu1</a></li>
											<li><a href="#">menu2</a></li>
											<li><a href="#">menu3</a></li>
											<li><a href="#">menu4</a><a href="#">4</a></li>
											<li><a href="#">menu5</a><a href="#">5</a></li>
											<li><a href="#">menu6</a><a href="#" data-icon="star">6</a></li>
											<li><a href="#">menu7</a><a href="#">7</a></li>
										</ul>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(document).on("mobileinit", function(){
							//検索フィルター
							$.mobile.listview.prototype.options.filter= true;
							//検索フィルター内に任意の文字表示
							$.mobile.listview.prototype.options.filterPlaceholder= "検索します";
							//検索フィルターのテーマ
							$.mobile.listview.prototype.options.filterTheme="b";
							//リストビューのテーマ
							$.mobile.listview.prototype.options.theme="e";
						});
					

 

【test2.jsファイルに記述するコード】

						$(document).on("mobileinit", function(){
							//丸角リスト
							$.mobile.listview.prototype.options.inset= true;
							//リスト区切りのテーマ
							$.mobile.listview.prototype.options.dividerTheme="d";
							//分割ボタンのアイコン
							$.mobile.listview.prototype.options.splitIcon="info";
							//分割ボタンのアイコンのテーマ
							$.mobile.listview.prototype.options.splitTheme="e";
							//カウントバブルのテーマ
							$.mobile.listview.prototype.options.countTheme="e";
						});
					

 

全ページのリストビューのテーマなどを一括設定できる方法があります。
(とりあえず画像8は何にも適用してない状態です。)

まず、test1.jsをhead内に読み込ませます。
test1.jsの内容は主にリストビューの「検索フィルター」に関する設定です。
$.mobile.listview.prototype.options.」のあとに、

  • filter= true;」で検索フィルターを設置
  • filterPlaceholder= "任意の文字";」でフィルター内に任意の文字を表示させます
  • filterTheme="テーマ";」で検索フィルターエリアの外側部分のテーマを設定
  • theme="テーマ";」でリストビュー全体のテーマ設定

これを適用したのが画像9になります。
全ページにあるリストビューに検索フィルターを一括で設置したい時などに使ってみてください。

 

次に、head内のtest1.jsを削除してtest2.jsを読み込ませます。
$.mobile.listview.prototype.options.」のあとに、

  • inset= true;」で丸角リストにします
  • dividerTheme="テーマ";」でリスト区切りのテーマを設定
  • splitIcon="ボタンアイコン";」で分割ボタンのアイコンを設定
  • splitTheme="テーマ";」で分割ボタンのアイコンのテーマを設定
  • countTheme="テーマ";」でカウントバブルのテーマを設定

これを適用したのが画像10になります。
ちなみにHTMLでmenu6は「data-icon="star"」を設定しているため、
menu6の分割ボタンアイコンだけは「info」になっていません。
全ページにあるリストビューのテーマなどの一括設定をする時に使ってみてください。