column

jQuery Mobile 基本htmlテンプレート

CATEGORY jQuery PC & Web お勉強 TAG, , ,

投稿日:2013年5月2日 更新日:

執筆者:

jQuery Mobileの基本的なhtmlテンプレート

基本を打ち込む(基本的な単一ページテンプレート)

001


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!--/header-->

<div data-role="content">
<p>Hello World</p>

<ul data-role="listview" data-inset="true" data-filter="true">
	<li><a href="#">Acura</a></li>
	<li><a href="#">Audi</a></li>
	<li><a href="#">BMW</a></li>
	<li><a href="#">Cadillac</a></li>
	<li><a href="#">Ferrari</a></li>
</ul>

<form>
<label for="slider-0">input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100">
</form>

<a href="#" data-role="button" data-icon="star" data-theme="b">Button</a>
</div><!--/content-->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!--/footer-->
</div><!--/page-->
</body>
</html>

複数ページテンプレート

002 003


<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!--header-->

<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#bar">bar</a></p>
</div><!--content-->

<div data-role="footer">
<h4>Page Footer</h4>
</div><!--footer-->
</div><!--page-->

<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!--header-->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
</div><!--content-->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!--footer-->
</div><!--page-->

Ajaxナビゲーションにおけるページタイトル

004
005


<div data-role="page" id="foo" data-title="Page Foo">

ページ切替効果

flip


<p>View internal page called <a href="#bar" data-transition="flip">bar</a></p></pre>

flow


<p>View internal page called <a href="#bar" data-transition="flow">bar</a></p>

ダイアログの作成

backBtnの作成


<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

コメントを残す

関連記事

PREV

jQueryメソッド 色々やってみた

NEXT

jQuery Mobile 様々なリストと問合せフォーム

jQuery Mobile 基本htmlテンプレート

side bar

メニューはこちら

メニューはこちら