LoginSignup
1

More than 5 years have passed since last update.

jQuery Mobileの勉強 − 基本的なページ表示

Last updated at Posted at 2014-08-19

CDNの読み込み

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

Page

  • data-titleを指定するとページ毎のタイトルを指定できます。
<section id="page1" data-role="page" data-title="タイトル">
    <!-- コード -->
</section>

Header & Footer & Content

  • data-roleの指定を忘れないこと。
  • ヘッダーとフッターでは<h>タグを使うと中央寄せ表示されます。
<header data-role="header">
    <h3>jQuery Mobile</h3>
</header>
<article data-role="content">
    <!-- コード -->
</article>
<footer data-role="footer">
    <h3>Footer</h3>
</footer>

サンプルコード

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <title>jQuery Mobile</title> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  </head> 
  <body> 
    <section id="page1" data-role="page" data-title="jQuery Mobile - Page1">
      <header data-role="header">
        <h3>jQuery Mobile</h3>
      </header>
      <article data-role="content">
        <h3>Page 1</h3>
        <ul>
          <li>
            <p><a href="#page2">次へ</a></p>
          </li>
        </ul>
      </article>
      <footer data-role="footer">
        <h3>Footer</h3>
      </footer>
    </section><!-- Page1 -->
    <section id="page2" data-role="page" data-title="jQuery Mobile - Page2">
      <header data-role="header">
        <h3>jQuery Mobile</h3>
      </header>
      <article data-role="content">
        <h3>Page 2</h3>
        <ul>
          <li>
            <p><a href="#page1">前へ</a></p>
          </li>
          <li>
            <p><a href="#page3">次へ</a></p>
          </li>
        </ul>
      </article>
      <footer data-role="footer">
        <h3>Footer</h3>
      </footer>
    </section><!-- page2 -->
    <section id="page3" data-role="page" data-title="jQuery Mobile - Page3">
      <header data-role="header">
        <h3>jQuery Mobile</h3>
      </header>
      <article data-role="content">
        <h3>Page 3</h3>
        <ul>
          <li>
            <p><a href="#page2">前へ</a></p>
          </li>       </ul>
      </article>
      <footer data-role="footer">
        <h3>Footer</h3>
      </footer>
    </section><!-- page3 -->
  </body>
</html>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1