jQueryMobileサンプル

HTML

jQueryMobile1.4.5をダウンロード後Demoフォルダ内に以下HTMLファイルを作成し実行してください。

基本的な使い方

jQueryMobileBasic.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile1.4.5基本</title>
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<!-- Start of first page: #home -->
<div data-role="page" id="home" data-theme="a">

	<div data-role="header">
		<h1>jQueryMobile1.4.5基本</h1>
		<a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<h2>解説</h2>
		<p>このページは全てindex.htmlに記述されています。</p>
	</div><!-- /content -->

	<div data-role="footer" data-theme="a">
		<h4>&copy 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page home -->

<!-- Start of information page: #info -->
<div data-role="page" id="info" data-theme="a">

	<div data-role="header">
		<h1>Info</h1>
		<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>これもindex.htmlの内容です。</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>&copy; 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page info -->

</body>
</html>

ボタンやリンクのサンプル

jQueryMobileSample.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile1.4.5サンプル</title>
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<!-- Start of first page: #home -->
<div data-role="page" id="home" data-theme="a">

	<div data-role="header">
		<h1>jQueryMobile1.4.5サンプル</h1>
		<a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<h2>メインコンテンツ</h2>

		<p>夏草や　兵どもが　夢の跡</p>

		<p><a href="#two">通常リンク（⇒ページ2へ）</a></p>

		<h3>ボタンの書き方</h3>
		<p><a href="#two" class="ui-btn ui-shadow ui-corner-all">2ページ目へ</a></p>
		<p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">ダイアログページへのリンク</a></p>
	</div><!-- /content -->

	<div data-role="footer" data-theme="a">
		<h4>&copy 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page home -->

<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

	<div data-role="header">
		<h1>サブコンテンツ（ページ2）</h1>
		<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a>
		<a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<h2>jQueryMobile</h2>
		<p>デフォルトテーマは白と青を基調とした”a”と黒を基調とした”b”の2種類<br>もちろんオリジナルテーマも作成できる</p>
		<p><a href="#home" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">ホームに戻る</a></p>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>&copy; 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page two -->

<!-- Start of third page: #popup -->
<div data-role="page" id="popup">

	<div data-role="header" data-theme="b">
		<h1>ダイアログ</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<h2>ダイアログ</h2>
		<p>ポップアップのダイアログページもできます。アップロードしないと動作しない可能性はありますが。</p>
		<p><a href="#home" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">ホームに戻る</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>&copy; 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page popup -->

<!-- Start of information page: #info -->
<div data-role="page" id="info" data-theme="a">

	<div data-role="header">
		<h1>情報ページ</h1>
		<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<h2>情報ページ</h2>
		<p>このようにページ上部のアイコンボタンでアプリっぽくできます。</p>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>&copy; 2022 dianxnao.com</h4>
	</div><!-- /footer -->
</div><!-- /page info -->

</body>
</html>

コメント