jQuery Mobile入門と高度な活用方法

jQuery Mobileの概要

jQuery Mobileは、HTML5/CSS3に基づいたオープンソースでクロスプラットフォームのUIフレームワークです。このフレームワークは非常にカスタマイズ可能なUIを提供し、jQueryライブラリを基盤としています。jQuery Mobileは宣言的なコーディングを使用するため、学習と使用が容易です。

本書の内容

本書では、jQuery Mobileを使ってアプリケーションを開発するための80以上のレシピを紹介します。各章では、基本的な使い方から高度な機能まで幅広くカバーしています。

必要な環境

jQuery Mobileを使うには、テキストエディタとブラウザが必要です。また、いくつかのレシピではNode.jsサーバーのインストールも必要です。

対象読者

jQuery/JavaScriptの初心者から経験豊富な開発者まで、幅広い層に役立つ内容となっています。

第1章: 入門

本章では、jQuery Mobileの基本的な使い方について説明します。

最初のjQuery Mobileアプリケーションを作る

以下の手順で、簡単なjQuery Mobileアプリケーションを作成します。

テキストエディタで以下のような`main.html`ファイルを作成します。

    <html>
      <head>
        <title>Welcome</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
        <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
        <script src='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js'></script>
      </head>
      <body>
        <!-- Main Page -->
        <div id='main' data-role='page'>
          <div data-role='header'>
            <h1>Welcome!</h1>
          </div>
          <div id='content' data-role='content'>
            <p>The jQuery Mobile Cookbook</p>
          </div>
          <div data-role='footer'>
            <h4>Enjoy reading the book ...</h4>
          </div>
        </div>
      </body>
    </html>

お好みのブラウザで`main.html`ファイルを開き、以下の画面が表示されることを確認します。

第2章: ページとダイアログ

本章では、ページとダイアログの作成方法について説明します。

単一ページテンプレートアプリケーションを作る

以下の手順で、単一ページテンプレートアプリケーションを作成します。

`main.html`ファイルを作成し、以下のようにページコンテナを追加します。

    <div id="main" data-role="page">
      <div data-role="header">
        <h1>Header of main.html</h1>
      </div>
      <div data-role="content">
        <a href="page2.html" data-role="button">Go to Page 2</a>
      </div>
      <div data-role="footer">
        <h4>Footer of main.html</h4>
      </div>
    </div>

`page2.html`ファイルを作成し、以下のようにページコンテナを追加します。

    <div id="page2" data-role="page">
      <div data-role="header">
        <h1>Header of page2.html</h1>
      </div>
      <div data-role="content">
        <a href="#" data-role="button" data-rel="back" data-theme="b">Go Back</a>
      </div>
      <div data-role="footer">
        <h4>Footer of page2.html</h4>
      </div>
    </div>

第3章: ツールバー

本章では、ツールバーの使用方法について説明します。

固定ツールバーを使用する

以下の手順で、固定ツールバーを使用してシンプルな写真ビューアアプリケーションを作成します。