ホーム » 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">ページ1へ</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 でプログラムからページを切り替える