トップページへ戻る

1、jQuery mobileで独自テーマを作ります

ここを参考にすれば出来るのですが、やや複雑なので、単純化して説明しましょう。

まず、jQuery mobileの基本ページを作ります。

data-theme="z"をdivタグに書きます。listviewを使った、単純なデータ表示ページです。

例、jqMobileTheme.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
	<div data-role="page" id="index" data-theme="z">
		<div data-role="header" data-theme="z">
		 商品一覧
		 </div>
		<div data-role="content" data-theme="z">
			<!--内容 -->
			<ul data-role="listview" data-inset="true">
				<li><h1>商品名=iPhone4S</h1><h2>値段=50000円</h2></li> 
				<li><h1>商品名=Galaxy Tab</h1><h2>値段=30000円</h2></li> 
				<li><h1>商品名=iPed</h1><h2>値段=1000円</h2></li> 
			</ul>
		</div>
		<div data-role="footer" data-theme="z">
			&copy;Hanrin Keisin
 		</div>
	</div>
</body>
</html>

以上のページの「data-theme="z"」を書いていきます。

data-role="header"には、class="ui-body-z ui-header"が

data-role="content"には、class="ui-body-z ui-content"が

data-role="footer"には、class="ui-body-z ui-footer"が

自動的に適用されるので、それぞれにスタイルを書いて行きます。CSS3は標準でOKなので、積極的にCSS3を使う事をお勧めします。

data-role="header"の中の、<h1>のCSSを書くには、

.ui-body-z .ui-header h1 {
   color: #f00;
 }

のように、半角区切りで書きます。CSSセレクタの基礎を思い出してください。

 

例、jqMobileTheme.html (CSSを追加したもの）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<style>
 .ui-body-z .ui-header {
 	background-image: url("../img/mail.png");
 	-webkit-background-size: 100% 100%;
 	text-align:center;
 	padding: 5px;
 	height: 40px;
 	border: 1px solid #090;
 	border-radius: 0.5em;
 }
 .ui-body-z .ui-content {
 	margin: 0px;
 }
 .ui-body-z .ui-content ul li {
 	background-image: url("../img/t4.gif");
 }
 .ui-body-z .ui-content ul li h1 {
 	color: #f00;
 }
 .ui-body-z .ui-footer {
 	text-align:center;
 	padding: 5px;
 	height: 40px;
 	border: 1px solid #70F957;
 	border-radius: 0.5em;
 	background-color: #c93;
 }
 </style>
</head>
<body>
	<div data-role="page" id="index" data-theme="z">
		<div data-role="header" data-theme="z"> 商品一覧 </div>
		<div data-role="content" data-theme="z">
			<!--内容 -->
			<ul data-role="listview" data-inset="true">
				<li>
					<h1>商品名=iPhone4S</h1>
					<h2>値段=50000円</h2>
				</li>
				<li>
					<h1>商品名=Galaxy Tab</h1>
					<h2>値段=30000円</h2>
				</li>
				<li>
					<h1>商品名=iPed</h1>
					<h2>値段=1000円</h2>
				</li>
			</ul>
		</div>
		<div data-role="footer" data-theme="z"> &copy;Hanrin Keisin </div>
	</div>
</body>
</html>

☆　サンプル　☆

問題１

上の方法で、「研修旅行のページ」に自分で作ったテーマを適用しなさい。

(場所は public_html/tomcat/htm5/travel.htmlですね）

テーマは自由に作っても良いが、以下の条件をクリアしている事

１、headerの背景に画像が入っている。borderを設定し、角を丸めてある
２、conentの背景に画像が入っている。borderを設定し、角を丸めてある
３、footerの背景色が設定されている。borderを設定し、角を丸めてある
４、どこかにCSS3でアニメーションが入っている

見やすいテーマを作ってください。１から３まで出来た人には、３０点、全部出来た人には50点をプラスします。

トップへ戻る