Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 WEB 」 - 中項目:「 jQueryMobile 」

「 jQueryMobileの基本構文 」

jQueryMobileの基本構文について


回答

全体の基本構文、ページに関する基本は以下ソースを参考。
参考URL
http://mam-mam.net/jqm_sample/

ソース

<!DOCTYPE html>
<html> 
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>タイトル</title>
  <!-- IEを常に互換モードにしない(標準モードへ) -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!-- jQueryMobileのCSSの読み込み フォルダは読み替えてください -->
  <link rel="stylesheet" href="js/jquery_mobile/jquery.mobile-1.4.5.min.css" />
  <!-- jQueryの読み込み フォルダは読み替えてください -->
  <script src="js/jquery/jquery-2.1.3.min.js"></script>
  <!-- jQueryMobileの読み込み フォルダは読み替えてください -->
  <script src="js/jquery_mobile/jquery.mobile-1.4.5.min.js"></script>
  <!-- ビューポートの指定 headの最後ので示さないと上書きされる -->
  <meta name="viewport"
    content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1, minimum-scale=0.25, maximam-scale=3.0">
</head>
<body>
  <!-- 最初ページの始まり -->
  <div data-role="page" id="page1" data-theme="a">
    <!-- ヘッダーの始まり -->
    <div data-role="header" data-position="fixed">
      <a href="">左端ボタン</a>  <!-- ヘッダー内の1つ目のaタグは左端ボタンになる -->
      <h3>ヘッダー</h3>
      <a href="">右端ボタン</a>  <!-- ヘッダー内の2つ目のaタグは右端ボタンになる -->
    </div>
    <!-- ヘッダーの終わり -->
    <!-- コンテンツ(本文)の始まり -->
    <div class="ui-content" role="main">
      <h2>コンテンツ</h2>
      <a href="#panel1" data-icon="bars" data-role="button" data-inline="true">サイドパネルを表示</a><br>
      <a href="#dialog1" data-icon="alert" data-role="button" data-inline="true">ダイアログを表示</a><br>
      <a href="#popup1" data-icon="info" data-role="button" data-inline="true" data-transition="pop" data-rel="popup" data-position-to="origin">ポップアップを表示</a>
    </div>
    <!-- コンテンツ(本文)の終わり -->
 
    <!-- フッターの始まり -->
    <div data-role="footer" data-position="fixed">
      <!-- フッター内のナビゲーションバー始まり 5列以上は下段に並ぶ -->
      <div data-role="navbar">
        <ul>
          <li><a href="button.html" data-icon="info" data-transition="flow">ボタン<br>ウィジェット</a></li>
          <li><a href="radio.html" data-icon="gear" data-transition="flow">ラジオボタン<br>ウィジェット</a></li>
          <li><a href="check.html" data-icon="check" data-transition="flow">チェックボックス<br>ウィジェット</a></li>
          <li><a href="select.html" data-icon="bars" data-transition="flow">セレクトメニュー<br>ウィジェット</a></li>
          <li><a href="switch.html" data-icon="minus" data-transition="flow">フリップスイッチ<br>ウィジェット</a></li>
        </ul>
      </div>
      <!-- ヘッダー内のナビゲーションバー終わり -->
    </div>
    <!-- フッターの終わり -->
 
    <!-- ページがサイドパネルを持つ場合の始まり  -->
    <div data-role="panel" data-position="right" data-dismissible="true" id="panel1"
      data-display="reveal" data-position-fixed="true" data-animate="true">
      <h3>サイドパネル</h3>
    </div>
    <!-- ページがサイドパネルを持つ場合の終わり  -->
 
    <!-- ポップアップの始まり -->
    <div data-role="popup" id="popup1" data-corners="true" data-arrow="t">
      <a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
      <p>ポップアップ</p>
    </div>
    <!-- ポップアップの終わり -->
  </div>
  <!-- 最初ページの終わり -->
 
  <!-- ダイアログのページの始まり -->
  <div data-role="page" data-title="ダイアログ" id="dialog1" data-dialog="true">
    <div data-role="header" data-theme="b">
      <h2>ダイアログのヘッダー</h2>
    </div>
    <div  class="ui-content" role="main">
      <span>ダイアログ表示</span>
      <a href="#page1" data-role="button">閉じる</a>
    </div>
  </div>
  <!-- ダイアログのページの終わり -->
 
  <!-- 2ページ目の始まり jQueryMobileでは1つのファイルに複数のページを持つことも出来る -->
  <div data-role="page" id="page2" data-theme="c">
    <div data-role="header">  <!-- ヘッダーの始まり -->
    </div>        <!-- ヘッダーの終わり -->
    <div class="ui-content" role="main">  <!-- コンテンツの始まり -->
      <h3>2ページ目コンテンツ</h3>
      <a href="#page1" data-role="button" data-inline="true">ページ1へ</a>
    </div>        <!-- コンテンツの終わり -->
    <div data-role="footer">  <!-- フッターの始まり -->
    </div>        <!-- フッターの終わり -->
  </div>
  <!-- 2ページ目の終わり -->
</body>
</html>


Mam's WebSite