jQueryMobileのページの記述

トップページJavascript CSS講座⇒jQueryMobileのページの記述

jQueryMobileのページの記述(data-role="page")


jQueryMobileでは1つのHTMLファイルで複数のページを持つことができます。ダイアログもページの1つとして作成します。
ページにはヘッダー、コンテンツ(本文)、フッター、サイドパネル、ポップアップを含むことができます。

<!DOCTYPE html>
<html> 
<head>
	<!-- //省略(jQueryMobileの基本構文 を参照) -->
</head>
<body>
	<!-- 1ページ目 -->
	<div data-role="page" id="page1">
		<div data-role="header">
			<h3>1ページ目ヘッダー</h3>
		</div>
		<div class="ui-content" role="main">
			<h3>1ページ目</h3>
			<a href="#page2">2ページ目へ</a>
			<a href="#dialog1" data-transition="pop">ダイアログ</a>
		</div>
	<div data-role="footer">
		<h3>1ページ目フッター</h3>
	</div>
	</div>
 
	<!-- 2ページ目 -->
	<div data-role="page" id="page2">
		<div class="ui-content" role="main">
			<h3>2ページ目</h3>
			<a href="#page1">1ページ目へ</a>
		</div>
	</div>
 
	<!-- ダイアログのページの始まり -->
	<div data-role="page" data-title="ダイアログ" id="dialog1" data-dialog="true">
		<div data-role="header" data-theme="b">
			<h2>ダイアログのヘッダー</h2>
		</div>
		<div  class="ui-content" role="main">
			<span>ですよねー。</span>
			<a href="#page1" data-role="button">閉じる</a>
		</div>
	</div>
</body>
</html>
			

DIVタグの属性data-role="page"が1つのページを示し、属性"data-title"でページごとにタイトルを指定できる

<div data-role="page" id="pg1" data-title="タイトルです">


ページ内のヘッダーについて

ページ内には1つのヘッダーを持つ事が出来、ヘッダー内にはナビゲーションボタン等を配置する事が出来る。
ヘッダー内には<h1>~<h7>タグを使ってタイトルを持つ事が出来る。
<div data-role="header">
	<h1>タイトル</h1>
</div>
				
ヘッダー内に<a>タグを入れると、最初のAタグはヘッダー内の左端のボタンになり、2つ目のAタグはヘッダー内の右端のボタンになる。
<div data-role="header">
	<a href="hoge.html">左端ボタン</a>
	<h3>タイトル</h3>
	<a href="hoge.html">右端ボタン</a>
</div>
 				
ヘッダー内のAタグにはアイコンをつけたり(data-icon)、アイコンの位置を指定することもできる。
<div data-role="header">
	<a href="top.html" data-icon="gear" class="ui-btn-right">トップページ</a>
	<h1>タイトル</h1>
</div>
				

ヘッダーに指定できる属性

data-theme ヘッダーにテーマを設定する
指定できる値 "a"~"e"
(例)
<div data-role="header" data-theme="a">

data-position="fixed"
ヘッダーを固定配置する。
つまり、ブラウザ画面を上下方向へスクロールしても常時ヘッダーが表示される。
タップ(クリック)するとヘッダーが非固定表示と固定表示を交互に繰り替えす。
(例)
<div data-role="header" data-position="fixed">

以下、data-position="fixed"の時に有効な属性
data-visible-on-page-show="false"
ヘッダーの固定配置(data-position="fixed")と共に使う。
data-visible-on-page-show="false"属性を設定すると、
初期状態ではヘッダーが固定配置されない。
タップ(クリック)するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
(例)
  <div data-role="header" data-position="fixed" data-visible-on-page-show="false">

data-fullscreen="true"
この属性を指定すると、コンテンツ(本文)の上に
ヘッダー(<div data-role="header"></div>)が重なって表示されます。
(例)
<div data-role="header" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">

data-tap-toggle="false"
ヘッダーの固定配置(data-position="fixed")と共に使用する。
この属性を設定すると、画面をタップ(クリック)してもヘッダの固定表示と非固定表示が切り替えできなくなり、常時ヘッダーが固定表示になる。
(例)
<div data-role="header" data-position="fixed" data-tap-toggle="false">

data-transition="slide" 又は "fade" 又は "none"
ヘッダーをタップして表示するときの効果を設定。ヘッダーを表示するときにスライドするかフェードするか効果なしか


ページ内のコンテンツ(本文)について

jQueryMobile1.4のコンテンツ(本文)の記述は以下
<div class="ui-content" role="main">~本文</div>
(参考) jQueryMobile1.3までのコンテンツ(本文)の記述は以下
<div data-role="content">~本文</div>


ページ内のフッターについて

ページ内には1つのフッターを持つ事が出来、フッター内にはナビゲーションボタン等を配置する事が出来る。
<div data-role="page">
	<div data-role="footer">
		フッター
	</div>
</div>
				

フッターに指定できる属性

data-theme フッターにテーマを設定する
指定できる値 "a"~"e"
(例)
<div data-role="footer" data-theme="a">

data-position="fixed"
フッターを固定配置する。ブラウザ画面を上下方向へスクロールしても常時フッターが表示される。タップ(クリック)するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
(例)
<div data-role="footer" data-position="fixed">

data-visible-on-page-show="false"
フッターの固定配置(data-position="fixed")と共に使う。
data-visible-on-page-show="false"属性を設定すると、初期状態ではフッターが固定配置されない。画面をタップ(クリック)したときに固定配置表示される。
(例)
<div data-role="footer" data-position="fixed" data-visible-on-page-show="false">

data-fullscreen="true"
この属性を指定すると、コンテンツ(<div data-role="content"></div>)の上にフッター(<div data-role="footer"></div>)が重なって表示されます。
(例)
<div data-role="footer" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">

data-tap-toggle="false"
フッターの固定配置(data-position="fixed")と共に使用する。
この属性を設定すると、画面をタップ(クリック)してもフッターの固定表示と非固定表示が切り替えできなくなり常時フッターが固定表示になる。
(例)
<div data-role="header" data-position="fixed" data-tap-toggle="false">

data-transition="slide" 又は "fade" 又は "none"
フッターをタップして表示するときの効果を設定、フッターを表示するときにスライドするかフェードするか効果なしか