jQuery Mobile ページ

jQuery Mobileで始める

ヒント：jQuery Mobileはすべてのモバイルデバイスに対応していますが、デスクトップコンピュータでは、CSS3のサポートが限られているため、互換性問題が発生する可能性があります。

したがって、このチュートリアルでは、最高の読書体験を提供するために、Google Chromeブラウザの使用をお勧めします。

例

<body>
<div data-role="page">
  <div data-role="header">
    <h1>私のホームページへようこそ</h1>
  </div>
  <div data-role="content">
    <p>私はモバイル開発者です！</p>
  </div>
  <div data-role="footer">
    <h1>フッターのテキスト</h1>
  </div>
</div>
</body>

自分で試してみる

例説明：

  • data-role="page" はブラウザに表示されるページ
  • data-role="header" でページ上部のツールバー（タイトルや検索ボタンなどに常用）を作成
  • data-role="content" でページの内容（テキスト、画像、フォーム、ボタンなど）を定義
  • data-role="footer" でページ下部のツールバーを作成

これらのコンテナには、任意のHTML要素（段落、画像、タイトル、リストなど）を追加できます。

ヒント：HTML5のdata-*属性は、jQuery Mobileを使用してモバイルデバイス向けに「タッチフレンドリー」なインタラクティブな外観を作成するために使用されます。

jQuery Mobileにページを追加

jQuery Mobileでは、単一のHTMLファイル内に複数のページを作成できます。

各ページをユニークな ID で区別し、href 属性を使用して互いに接続してください：

例

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">ページ二に移動</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">ページ1に移動</a>
  </div>
</div>

自分で試してみる

注：大量のコンテンツを持つウェブアプリケーションは、ロード時間に影響を与えます（テキスト、リンク、画像、スクリプトなど）。内部リンクページでは使用しないように、外部ファイルを使用してください：

<a href="externalfile.html">外部ページに移動</a>

ページをダイアログとして使用

ダイアログは情報を表示したり入力を求めるためのウィンドウタイプです。

ユーザーがリンクをクリック（タップ）したときにダイアログを開くには、そのリンクに data-rel="dialog" を追加してください：

例

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">ページ2に移動</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">ページ1に移動</a>
  </div>
</div>

自分で試してみる