ホーム » jQuery Mobile 入門 » jQuery Mobile でプログラムからページを切り替える

jQuery Mobile でプログラムからページを切り替える

「jQuery Mobile でのページへのリンク」では a タグの href のリンク先に HTML または data-role が page である要素の ID を指定することによって、モバイルサイトらしくページ遷移が行われることをみました。

しかしながら、アンカータグの href 属性は通常スタティックなものであるため、動的なリンク先の切り替えに不向きです。

スクリプトで何らかの処理を実行し、その結果別のページへ移動する、といった処理を行う場合はどのようにすればよいでしょうか。

このページではスクリプトからページを切り替える方法を示します。

changePage メソッドによるページ切り替え

いきなり結論を言うと、スクリプトからページを切り替えるには、changePage メソッドを利用します。

ここでは「あるボタンを押した後、confirm ポップアップを表示してその結果 (OK/Cancel) によって移動するページを切り替える」ということをしてみましょう。

さっそく、コードは次の通り。

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <meta charset="UTF-8">
  <title>jQuery Mobile デモ</title>
  <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>
<div id="page1" data-role="page">
  <div data-role="header"><h1>changePage デモ</h1></div>
  <div data-role="content">
    <p>ページ 1</p>
    <p><button data-role="button" id="button1">ボタン</button>
  </div>
  <div data-role="footer">© keicode.com</div>
</div>
<div id="page2" data-role="page">
  <div data-role="header"><h1>changePage デモ</h1></div>
  <div data-role="content">
    <p>ページ 2</p>
    <p><a href="#page1">ページ１へ</a></p>
  </div>
  <div data-role="footer">© keicode.com</div>
</div>
<script type="text/javascript">
$('#button1').bind('click', function(){
  var to;
  if(confirm('Do you want to go to Page2?')){
    to = '#page2';
  }
  else{
    to = 'another.php';
  }
  $.mobile.changePage(to, { transition: 'slidedown'});

});
</script>
</body>
</html>

ポイントは $.mobile.changePage メソッドです。

これの第一引数で渡したページへ移動します。第二引数以降はオプション（任意）ですが、ここでは第二引数でページの遷移方法 (transition) を設定しています。

せっかくなので、ちょっと脱線して移動先のページである another.php も載せておきます。(ヘッダーは同様なので省略)

<!doctype html>
<html>
<head>
...
</head>
<body>
<div id="page1" data-role="page">
  <div data-role="header"><h1>changePage デモ</h1></div>
  <div data-role="content">
    <p>他のページ</p>
    <p><a href="./" data-role="button" data-inline="true">戻る</a>
  </div>
  <div data-role="footer">© keicode.com</div>
</div>
</body>
</html>

こちらのページでは、ボタンは button 要素を使わずにアンカータグを使っています。a タグで data-role="button" とすることでリンクの表示がボタンっぽくなり、さらに data-inline="true" とすることで幅が狭くなります。

ホーム » jQuery Mobile 入門 » jQuery Mobile でプログラムからページを切り替える