jQueryMobileの基本構文

トップページJavascript CSS講座⇒jQueryMobileの基本構文

jQueryMobileの基本構文


以下jQueryモバイルの基本構文です。(HTML5の記述での構文)
1つのHTMLファイルで複数ページ、ダイアログ、ポップアップ、サイドパネル等を含んで記述しています。
また、メインのページ(page1)にはヘッダー、フッター、コンテンツを含んでいます。
コンテンツにはダイアログ、ポップアップ、サイドパネルへのリンクを含み、フッターにはナビゲーションバーを含んでいます。
ヘッダーでjQueryおよびjQueryMobileをロードします。
Viewportを別途に指定する場合はjQueryMobileをロードしてから設定する必要があります。

			
			
<!DOCTYPE html>
<html> 
<head>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>タイトル</title>
	<!-- IEを常に互換モードにしない(標準モードへ) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- jQueryMobileのCSSの読み込み フォルダは読み替えてください -->
	<link rel="stylesheet" href="js/jquery_mobile/jquery.mobile-1.4.5.min.css" />
	<!-- jQueryの読み込み フォルダは読み替えてください -->
	<script src="js/jquery/jquery-2.1.3.min.js"></script>
	
	<!-- jQueryMobileの設定を変更する場合は以下スクリプト内で行う -->
	<script>
		$(document).on("pageinit","#page1",function(){
			//ページが初回に読み込まれたとき1回だけ実行するスクリプトを記述
			//ajaxを無効にする
			$.mobile.ajaxEnabled = false;
		});
		$(document).on("pageshow","#page1",function(){
			//ページが表示されるたびに実行するスクリプトを記述
		});
	</script>
	
	
	<!-- jQueryMobileの読み込み フォルダは読み替えてください -->
	<script src="js/jquery_mobile/jquery.mobile-1.4.5.min.js"></script>
	<!-- ビューポートの指定 headの最後ので示さないと上書きされる -->
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1, minimum-scale=0.25, maximam-scale=3.0">
</head>
<body>
	<!-- 最初ページの始まり -->
	<div data-role="page" id="page1" data-theme="a">
		<!-- ヘッダーの始まり -->
		<div data-role="header" data-position="fixed">
			<a href="">左端ボタン</a>  <!-- ヘッダー内の1つ目のaタグは左端ボタンになる -->
			<h3>ヘッダー</h3>
			<a href="">右端ボタン</a>  <!-- ヘッダー内の2つ目のaタグは右端ボタンになる -->
		</div>
		<!-- ヘッダーの終わり -->
		<!-- コンテンツ(本文)の始まり -->
		<div class="ui-content" role="main">
			<h2>コンテンツ</h2>
			<a href="#panel1" data-icon="bars" data-role="button" data-inline="true">サイドパネルを表示</a><br>
			<a href="#dialog1" data-icon="alert" data-role="button" data-inline="true">ダイアログを表示</a><br>
			<a href="#popup1" data-icon="info" data-role="button" data-inline="true" data-transition="pop" data-rel="popup" data-position-to="origin">ポップアップを表示</a>
		</div>
		<!-- コンテンツ(本文)の終わり -->
		<!-- フッターの始まり -->
		<div data-role="footer" data-position="fixed">
			<!-- フッター内のナビゲーションバー始まり 5列以上は下段に並ぶ -->
			<div data-role="navbar">
				<ul>
					<li><a href="button.html" data-icon="info" data-transition="flow">ボタン<br>ウィジェット</a></li>
					<li><a href="radio.html" data-icon="gear" data-transition="flow">ラジオボタン<br>ウィジェット</a></li>
					<li><a href="check.html" data-icon="check" data-transition="flow">チェックボックス<br>ウィジェット</a></li>
					<li><a href="select.html" data-icon="bars" data-transition="flow">セレクトメニュー<br>ウィジェット</a></li>
					<li><a href="switch.html" data-icon="minus" data-transition="flow">フリップスイッチ<br>ウィジェット</a></li>
				</ul>
			</div>
		<!-- ヘッダー内のナビゲーションバー終わり -->
		</div>
		<!-- フッターの終わり -->
		<!-- ページがサイドパネルを持つ場合の始まり  -->
		<div data-role="panel" data-position="right" data-dismissible="true" id="panel1" data-display="reveal" data-position-fixed="true" data-animate="true">
			<h3>サイドパネル</h3>
		</div>
		<!-- ページがサイドパネルを持つ場合の終わり  -->
		<!-- ポップアップの始まり -->
		<div data-role="popup" id="popup1" data-corners="true" data-arrow="t">
			<a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
			<p>ポップアップ</p>
		</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>
	<!-- ダイアログのページの終わり -->

	<!-- 2ページ目の始まり jQueryMobileでは1つのファイルに複数のページを持つことも出来る -->
	<div data-role="page" id="page2" data-theme="b">
		<!-- ヘッダーの始まり -->
		<div data-role="header">
		</div>
		<!-- ヘッダーの終わり -->
		<!-- コンテンツの始まり -->
		<div class="ui-content" role="main">  
			<h3>2ページ目コンテンツ</h3>
			<a href="#page1" data-role="button" data-inline="true">ページ1へ</a>
		</div>
		<!-- コンテンツの終わり -->
		<!-- コンテンツの終わり -->
		<div data-role="footer">
		</div>
		<!-- フッターの終わり -->
	</div>
	<!-- 2ページ目の終わり -->
</body>
</html>