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