jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > 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">&copy; 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">ページ1へ</a></p>
  </div>
  <div data-role="footer">&copy; 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">&copy; keicode.com</div>
</div>
</body>
</html>

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

ホーム > jQuery Mobile 入門 > jQuery Mobile でプログラムからページを切り替える
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門