*

ページのURLを設定する

公開日: : 最終更新日:2016/04/28 jQueryMobile

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。
data-url属性を使用したサンプルコードの実行結果はこちら

サンプルコードの実行結果を確認すると、初めに表示されるページにはページ2へのリンクが2つあり、リンク先はそれぞれ”page_2″,”#page2″です。どちらもページ2へ遷移しますが違いもあります。このHTML文書が以下のURLで表示されるとします。

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/12.html

このURLから前者のリンクでページ2へ遷移すると、アドレスバーのURLが、

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/page_2

と設定されます。ブラウザのステータスバーでは、リンク先もこのように表示され、同じHTML文書内のページあれば、data-url属性でdomain以下の部分を値として設定すると、前のページとの行き来ができます。

ですが、後者のリンクでページ2へ遷移すると、アドレスバーのURLが

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/12.html#page2

設定されますこれだけではなくページ2(id=”page2″)のdata-url属性の値も”page2″に変更されるので、これ以降前者のリンクでページを遷移することができなくなります。この設定は、同一のHTML文書内のページだけではなくて、異なるHTML文書のページに対しても同じことができます。ただ、Ajaxによるページ遷移時だけです。

リンク先のコンテンツを前もって読み込む

表示中とは別のHTML文書のコンテンツ(ページやダイアログ)にリンクしているとき、通常はリンクがタップ・クリックされてからリンク先のコンテンツをAjax通信で読み込んで表示します。ですが、ネットの通信環境により読み込みに時間がかかることがあります、

そんなときに利用するのが、リンクを設定するaタグにdata-prefetch=”true”を追加しておくと、そのリンクを含むページが表示されるときに、リンク先のコンテンツも予め読み込む処理が行われます。読み込んだコンテンツが表示されるのは、それにリンクするaタグがクリック・タップされてからです。

こうすることで、画面の遷移時の待ち時間をユーザーに負担を感じさせずに済みますが、事前に読み込まれた時点のコンテンツが表示されるので、内容がリアルタイムのものではないことがあります。

DOMキャッシュの設定をする

表示中とは別のHTML文書からダイアログやページを読み込むときに、それらのタグにdata-dom-cache=”true”という設定をすると、一度通信して読み込まれたページの内容が表示中のHTML文書内に記憶されたままとなります。記憶されたページを表示するときは、ページを読む込むための通信が発生しないので、表示がすばやくなりますが、記憶された内容は最初に読み込んだ時点の物なので、情報はリアルタイムに反映できません。

この設定をしていないとき、a.htmlからb.htmlに遷移することを何度も繰り返すとページを遷移させるたびにサーバーと通信してページの内容を取得します。1回の通信ならかかる時間は少ないですが、サービスの規模が大きくなり、ユーザーがたくさん同時に通信を行うと、サーバーに大きな負担がかかるので、data-dom-cache=”true”はこういう時に効果を発揮します。

スポンサードリンク

関連記事

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

ボタンを配置する

リンクを表すaタグに「data-role="button"」を追加すると、画面にはボタンが表示されま

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑