LoginSignup
9

jQuery Mobileの複数ページ作成と戻るボタン

Last updated at Posted at 2014-03-07

複数ページ作成と戻るボタン

jQuery Mobileで複数ページは一つのhtml内で、
data-role="page" のdivを複数用意してあげます。
別のページに遷移するのは

<div data-role="page" id="id2">
//contents
</div>

のページに飛びたい場合は、

<a href="#id2">

で指定してあげればそのページに遷移できます。

あとは元のページはブラウザの場合backボタンでいいのですが、
PhoneGapのiOSアプリなどは戻るボタンがなかったりするので、
戻るボタンを定義してあげなければいけません。
そのときは、

$(document).bind("bobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
});

とaddBackBtnオプションをtrueにしてあげれば、ページを遷移したときにbackボタンが表示されるようになります。

以下がサンプルです。

hello.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).bind("bobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
});
</script>
</head>
<body>
<div data-role="page" id="id1">
  <div data-role="header" data-add-back-btn="true">
    <h1>test page 1</h1>
  </div>
  <div role="main" class="ui-content">
    test page 1
    <a href="#id2">go to page2</a>
  </div>
</div>

<div data-role="page" id="id2">
  <div data-role="header" data-add-back-btn="true">
    <h1>test page 2</h1>
  </div>
  <div role="main" class="ui-content">
    test page2
  </div>
</div>
</body>
</html>

結果は1ページ目
jquerymobile-1.png

遷移後の2ページ目
jquerymobile-2.png

追記

あとで発見したのですが、戻るボタンは
http://qiita.com/jazzsasori/items/76cd0ac0dce6d666e6cc
にあるとおり、

<div data-role="header"> 
    <a href="" data-rel="back">戻る</a>
</div>

でも追加できるようです。

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
9