PAGES

jQuery Mobile には、「ページ」と呼ばれる機能がついています。ページ機能を使うと、1枚の HTMLファイルの中に複数のページを作る事ができるようになるんですね!ちょっとピンとこないかもしれませんが、上の 2nd ボタンをクリックしてみてください。移動先は別の HTMLファイルではなくて、今見ているこのページと同じ HTMLファイルに書かれたページです。同じ HTMLファイル内の移動なので、ページの遷移もサクサク快適!

複数のページを 1枚の HTMLファイルで書いた場合と、複数の HTMLファイルを用意した場合、どのような違いがあるのでしょう?答えは簡単!1枚のファイルにまとめてしまえば、サーバーへのリクエストは1枚分で済みますよね!でも複数に分けた場合は、ページの移動の度にサーバーにリクエストして通信します。

スマートフォンの場合は、CPUのスペックや通信環境がパソコンのようにパワフルではありません。ですから、場合によっては 1枚のファイルで複数ページを作ってあげた方が、快適にページを閲覧できるようになりますよね!

もちろんいくら 1枚のページにまとめられるからといって、何ページもまとめてしまってファイルサイズが大きくなってしまった ... というのでは意味がありません。コンテンツやサイトの構造によって、上手く使い分ける様にしたいですね!

マルチページ

Home

ここのページは、先ほどのページ(1st)と同じ HTMLファイルの中に書かれた 2ページ目のページです。このページが表示されるとき、下からスクロールして表示されましたね!jQuery Mobile では、ページの移動時にこのようなエフェクトを付ける事もできるんです。

ページ移動時のエフェクトには、以下のようなものがあります。

特に指定しない場合は、スライドで表示されます。Pop はポップアップ表示、Fade はフェードしながら表示されます。Flip というのは、まるでカードを裏返すような感じで表示が切り替わるエフェクトです。

ダイアログを表示

Home

ここが最後のページになります!ページの切り替えには、Fadeエフェクトを使ってみました。

ここで紹介するのは、ダイアログボックス。jQuery Mobile では、別ファイルへのリンクに、<a href="example.html" data-rel="dialog">ダイアログボックスを表示</a>というように、data-rel="dialog"を付けるだけで簡単にダイアログボックスとして表示してくれます。

ダイアログを表示

ここで紹介したのは、jQuery Mobile ならではの UIデザインと、マルチページが使えるページ機能、そして簡単にダイアログを表示してくれる機能を紹介しました。jQuery Mobile は、スマートフォンやタブレット向けのフレームワーク。これからスマートフォンサイトを作る機会があったら、ぜひ試してみてくださいね!