5月 122012
まずはサンプルコードの画面イメージから。
Galaxy S2で見た時のキャプチャー画面。クリックすると大きくなります。
よければQRコードを読み込んで、ご自分のスマフォでもご確認を。
ちなみにPCで確認するとこんな感じ。 HTML5対応ブラウザで確認下さいませ。
サンプルコード紹介の前に簡単なソースの説明。
- jQuery Mobileでは複数のページを1つのHTMLに記述する。通常のサイトは1ページ＝1HTMLファイルですが、jQuery Mobileでは「data-role=”page”」を持つdiv要素が1ページを表示します。
- ヘッダー領域には、「data-role=”header“」、コンテンツ領域に「data-role=”content”」、フッター領域に「data-role=”footer”」と記述する。これを記述すると、自動でjQuery Mobileが画面を装飾してくれる。
- ページ要素に対して「data-theme」を指定するとテーマを変更できる。「a」～「e」の5種類のテーマが用意されている。以下のサンプルでは、data-theme＝bにしています。値をbにするとiPhoneの標準UIのような見た目になる。
- リストは、コンテンツ領域内（data-role=”content”）にul要素を記述し、ul要素に対してカスタムデータ属性「data-role=”listview”」を指定することで表示できます。
- リスト表示では、li要素に「data-role=”list-divider”」を付けることでリストを区切る「見出し」も表示可能。
- ul要素にカスタムデータ属性「data-inset=”true”」を付けると、角丸の立体的なメニューになる。
以下のソースでは、jQueryサーバにあるファイルを直接読み込んでいます。もちろん、自分のWebサーバに落として使用するのもOKです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
jQuery Mobileを使用した簡単なサンプルコード
</title>
<!-- jQuery Mobileのスタイルシート、スクリプトファイル2つを読み込んでいます。 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
<!-- 幅をデバイス幅にする、初期拡大率を1にする -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>
jQuery Mobileのサンプル
</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">
Menu
</li>
<li>
<a href="#page1">
<h3>
お買い得.netとは?
</h3>
<p>
私が作ったWebサイトです♪
</p>
</a>
</li>
<li>
<a href="#page2">
<h3>
お買い得.netの機能
</h3>
<p>
お買い得.net の機能一覧を紹介しています。
</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<h4>
<small>
Copyright © 2011 to-R All Rights Reserved.
</small>
</h4>
</div>
</div>
<div data-role="page" id="page1" data-theme="b">
<div data-role="header">
<h1>
jQuery Mobileのサンプル
</h1>
</div>
<div data-role="content">
<h2>
お買い得.netとは?
</h2>
<p>
商品の価格を行えるWebサービスです。 <a href="http://okaidoku.net">お買い得.net</a>
</p>
<p>
amazon、楽天、Yahoo!ショッピング、価格.com で価格比較を行えます。
</p>
<p>
iPhone版、Android版、Windows Phone版もアプリとして公開中。 <a href="http://okaidoku.net/app/">アプリ紹介</a>
</p>
</div>
<div data-role="footer">
<h4>
<small>
Copyright © 2012 お買い得.net All Rights Reserved.
</small>
</h4>
</div>
</div>
<div data-role="page" id="page2" data-theme="b">
<div data-role="header">
<h1>
jQuery Mobile
</h1>
</div>
<div data-role="content">
<h2>
お買い得.netの機能
</h2>
<p>
Web版では、3つの機能を持っています。
</p>
<p>
1つ目は、価格比較機能。
</p>
<p>
2つ目は、amazon割引検索機能。
</p>
<p>
3つ目は、楽天検索機能です。
</p>
</div>
<div data-role="footer">
<h4>
<small>
Copyright © 2012 お買い得.net All Rights Reserved.
</small>
</h4>
</div>
</div>
</body>
</html>
通常のHTMLタグに見慣れないタグが数個。 簡単ですよね？
上記コードを書くだけでほぼ全部のスマートフォンを網羅してくれます。
jQuery Mobileって賢い。
Writing articles is tedious.I know where you can get unlimited content for your page, search
in google:
Anightund’s rewriter