*

ページの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

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

テーマを設定する

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

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑