jQuery Mobileを使ってみよう！ (4/5)
作成:2011-05-23 08:54
更新:2012-03-29 10:15
更新:2012-03-29 10:15
■複数ページの切り替え表示
jQuery Mobileの最大の特徴は、「ページ」単位で表示を作成する、という点でしょう。Webページ（HTMLファイル）ごとにリンクを移動していくのではなく、１つのWebページ内に複数のページ・タグを用意し、それらを切り替えて表示を変えることができます。
では、実際にやってみましょう。下のリスト欄に、２つのページを用意し、それをボタンで切り替える簡単なサンプルを挙げておきました。実際にアクセスして動作を確認してみましょう。なお、スマートフォンだけでなく、普通のパソコンのブラウザからアクセスしてもちゃんと表示されますので、基本的な表示の確認はパソコンでやってから最後にスマートフォンでチェックすると快適に動作確認が行えるでしょう。
ここでは、ページにアクセスすると「Next」というボタンが表示されます。そしてこれをクリックすると、「Next」というタイトルのページがスライドして現れます。立ちとるバーにある「Back」ボタンをクリックすると、逆向きに表示がスライドして元のページに戻ります。
・複数ページの記述
ここでは、２つのページタグが用意してあります。ページは、<div data-role="page">というように、data-role属性を"page"に指定したタグとして作成するのでしたね。ここでは、id="home"と、id="next"の２つのページタグを用意し、それぞれに表示の内容を記述してあります。これで実際にアクセスをすると、画面にはid="home"のページタグの内容だけが表示されます。それ以外のページタグは非表示のままになるのです。
・ボタンの記述
このホームページ・タグ内には、「Next」ボタンとして以下のようなタグが記述されていますね。これが、ボタンの正体です。なんと、ただの<a>タグなのです。
・ボタンのdata-role属性
よく見ると、まずdata-role="button"属性が書かれていますね。このdata-roleという属性は、ページタグでも登場しましたが、そのタグの役割を示すものなのです。ここで"button"と指定すれば、このタグはボタンとしての役割をはたすようになります。すなわち、表示もボタンと形となり、クリックすればハイライトしてボタンを押したように表示が変わります。
・表示変更の効果
続いて、data-transition="slide"という属性がありますが、この「data-transition」は、表示をどのようなやり方で変更するかを示すものです。ここでは"slide"としていますが、これで「画面が右から左にスライドする」ようにして表示が変更されるようになります。
・ページの移動
そして、肝心の「表示されるページの切り替え」は、href="#next"で指定しています。単純に、<a>タグのhrefで、表示したいページタグのIDを"#○○"というようにして指定すれば、そのページタグに表示が切り替わるのです。
・「戻る」ボタンの表示
次のページのタイトルには「Back」というボタンがあり、これをクリックすると前のページに戻ります。これも、実は単なる<a>タグです。href="#home"と指定して、前のページに戻っているだけなのです。
ただし、ひとつほかと違うのは、data-rel="back"という属性が追加されている点です。これを用意すると、このボタンは「戻る」ボタンとして表示され、クリックすると前に戻るエフェクトでページ移動するようになるのです。
この「Back」ボタンは、1.0より前のα版では自動的に表示されるようになっていたのですが、1.0b2では明示的に<a>タグを用意するように変更されました。自分で<a>タグを用意しないと「Back」ボタンは表示されないので、前のバージョンを使っていた人は注意しましょう。
――さあ、これで、複数ページの作成と、<a>タグによる表示の切り替えがわかりました。たったこれだけでも、「多数のページを作って、ボタンで切り替える」といったサイト構築の基本はできあがります。
※別のWebページにジャンプするには？
jQuery Mobileで<a>タグを使い、他のWebページに移動しようとすると、うまくページが切り替わらないのに気がついた人もいるかも知れません。jQuery Mobileでは、<a>タグはページタグの切り替えとして機能するように設計されています。普通のリンク（つまり、別のページにジャンプする）としては機能しないのです。
ページタグによる表示の切り替えではなく、まったく別のページに移動したい場合は、<a>タグに「data-ajax="false"」という属性を用意します。例えば、こんな感じです。
では、実際にやってみましょう。下のリスト欄に、２つのページを用意し、それをボタンで切り替える簡単なサンプルを挙げておきました。実際にアクセスして動作を確認してみましょう。なお、スマートフォンだけでなく、普通のパソコンのブラウザからアクセスしてもちゃんと表示されますので、基本的な表示の確認はパソコンでやってから最後にスマートフォンでチェックすると快適に動作確認が行えるでしょう。
ここでは、ページにアクセスすると「Next」というボタンが表示されます。そしてこれをクリックすると、「Next」というタイトルのページがスライドして現れます。立ちとるバーにある「Back」ボタンをクリックすると、逆向きに表示がスライドして元のページに戻ります。
・複数ページの記述
ここでは、２つのページタグが用意してあります。ページは、<div data-role="page">というように、data-role属性を"page"に指定したタグとして作成するのでしたね。ここでは、id="home"と、id="next"の２つのページタグを用意し、それぞれに表示の内容を記述してあります。これで実際にアクセスをすると、画面にはid="home"のページタグの内容だけが表示されます。それ以外のページタグは非表示のままになるのです。
・ボタンの記述
このホームページ・タグ内には、「Next」ボタンとして以下のようなタグが記述されていますね。これが、ボタンの正体です。なんと、ただの<a>タグなのです。
<a data-role="button" data-transition="slide" href="#next">Next</a>
・ボタンのdata-role属性
よく見ると、まずdata-role="button"属性が書かれていますね。このdata-roleという属性は、ページタグでも登場しましたが、そのタグの役割を示すものなのです。ここで"button"と指定すれば、このタグはボタンとしての役割をはたすようになります。すなわち、表示もボタンと形となり、クリックすればハイライトしてボタンを押したように表示が変わります。
・表示変更の効果
続いて、data-transition="slide"という属性がありますが、この「data-transition」は、表示をどのようなやり方で変更するかを示すものです。ここでは"slide"としていますが、これで「画面が右から左にスライドする」ようにして表示が変更されるようになります。
・ページの移動
そして、肝心の「表示されるページの切り替え」は、href="#next"で指定しています。単純に、<a>タグのhrefで、表示したいページタグのIDを"#○○"というようにして指定すれば、そのページタグに表示が切り替わるのです。
・「戻る」ボタンの表示
次のページのタイトルには「Back」というボタンがあり、これをクリックすると前のページに戻ります。これも、実は単なる<a>タグです。href="#home"と指定して、前のページに戻っているだけなのです。
ただし、ひとつほかと違うのは、data-rel="back"という属性が追加されている点です。これを用意すると、このボタンは「戻る」ボタンとして表示され、クリックすると前に戻るエフェクトでページ移動するようになるのです。
この「Back」ボタンは、1.0より前のα版では自動的に表示されるようになっていたのですが、1.0b2では明示的に<a>タグを用意するように変更されました。自分で<a>タグを用意しないと「Back」ボタンは表示されないので、前のバージョンを使っていた人は注意しましょう。
――さあ、これで、複数ページの作成と、<a>タグによる表示の切り替えがわかりました。たったこれだけでも、「多数のページを作って、ボタンで切り替える」といったサイト構築の基本はできあがります。
※別のWebページにジャンプするには？
jQuery Mobileで<a>タグを使い、他のWebページに移動しようとすると、うまくページが切り替わらないのに気がついた人もいるかも知れません。jQuery Mobileでは、<a>タグはページタグの切り替えとして機能するように設計されています。普通のリンク（つまり、別のページにジャンプする）としては機能しないのです。
ページタグによる表示の切り替えではなく、まったく別のページに移動したい場合は、<a>タグに「data-ajax="false"」という属性を用意します。例えば、こんな感じです。
<a href="next.html" data-role="button" data-ajax="false">go next</a>これで、jQuery Mobileのページタグ切り替えをOFFにし、<a>タグ本来のページ移動を行うようになります。あとで慌てないよう、ここで合わせて覚えておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Sample</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div id="home" data-role="page"> <div data-role="header"> <h1>Hello</h1> </div> <div data-role="content"> <p>jQuery Mobileサンプル。</p> <a data-role="button" data-transition="slide" href="#next">Next</a> </div> </div> <div id="next" data-role="page"> <div data-role="header"> <a data-role="button" data-transition="slide" href="#home" data-rel="back">Back</a> <h1>Next</h1> </div> <div data-role="content"> <p>次のページです。</p> </div> </div> </body> </html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る