5月 122012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - jQuery Mobileを用いた簡単なサンプルコード
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

まずはサンプルコードの画面イメージから。

Galaxy S2で見た時のキャプチャー画面。クリックすると大きくなります。

よければQRコードを読み込んで、ご自分のスマフォでもご確認を。

ちなみにPCで確認するとこんな感じ。 HTML5対応ブラウザで確認下さいませ。

 

サンプルコード紹介の前に簡単なソースの説明。

 

  1. jQuery Mobileでは複数のページを1つのHTMLに記述する。通常のサイトは1ページ=1HTMLファイルですが、jQuery Mobileでは「data-role=”page”」を持つdiv要素が1ページを表示します。
  2. ヘッダー領域には、「data-role=”header“」、コンテンツ領域に「data-role=”content”」、フッター領域に「data-role=”footer”」と記述する。これを記述すると、自動でjQuery Mobileが画面を装飾してくれる。
  3. ページ要素に対して「data-theme」を指定するとテーマを変更できる。「a」~「e」の5種類のテーマが用意されている。以下のサンプルでは、data-theme=bにしています。値をbにするとiPhoneの標準UIのような見た目になる。
  4. リストは、コンテンツ領域内(data-role=”content”)にul要素を記述し、ul要素に対してカスタムデータ属性「data-role=”listview”」を指定することで表示できます。
  5. リスト表示では、li要素に「data-role=”list-divider”」を付けることでリストを区切る「見出し」も表示可能。
  6. 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 &copy; 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 &copy; 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 &copy; 2012 お買い得.net All Rights Reserved.
                    </small>
                </h4>
            </div>
        </div>
    </body>
</html>

 

通常のHTMLタグに見慣れないタグが数個。 簡単ですよね?

上記コードを書くだけでほぼ全部のスマートフォンを網羅してくれます。

jQuery Mobileって賢い。

 


  One Response to “jQuery Mobileを用いた簡単なサンプルコード”

  1. Writing articles is tedious.I know where you can get unlimited content for your page, search
    in google:
    Anightund’s rewriter

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player