TOPページ

3-1 ページリンクを作成する 3-2 Ajaxを用いないリンク(1)―Ajaxを使用しないと明示する方法 3-3 Ajaxを用いないリンク(2)―外部サイトだと明示する方法 3-4 Ajaxを用いないリンク(3)―外部ドメインへのリンクを記述する 3-5 Ajaxを用いないリンク(4)―target指定をする 3-6 ブラウザの「戻る」リンクを作る 3-7 遷移しないリンクを作る Page Effects (3-8 to 3-13) 3-14 ページ遷移エフェクトを逆方向にする 4-1-1 グリッドレイアウトを作成する PAGE3

フッター

3-1 ページリンクを作成する

jQueryMobileでは、data-role="page"を複数記述することにより、1つのHTMLファイル内に複数のページを作成してリンク(ページ内リンク)させている場合も、data-role="page"を、1つのHTMLファイル内に1つだけ記述し複数のHTMLファイル間でリンク(ページ外リンク)させている場合も、同ドメイン内のリンクであれば、ページ遷移はAjaxを使って行われます。


<p>jQueryMobileでは、data-role="page"を複数記述することにより、1つのHTMLファイル内に複数のページを作成して<a href="#page2">リンク(ページ内リンク)</a>させている場合も、data-role="page"を、1つのHTMLファイル内に1つだけ記述し複数のHTMLファイル間で<a href="3-1-page2.html">リンク(ページ外リンク)</a>させている場合も、同ドメイン内のリンクであれば、ページ遷移はAjaxを使って行われます。
</p>

フッター

3-2 Ajaxを用いないリンク(1)―Ajaxを使用しないと明示する方法


リンク先を記述しているリンク要素(a)に、「data-ajax="false"」を記述すると、「Ajax 遷 移を切る」と、jQuery Mobile に明示的に示したことになり、Ajaxによるページ遷移は行わ れず、通常のリンクとして動作します。1ページだけに他のAPI を適用したいなど、技術的 な理由から、Ajax を使用せずページ全体を通常の遷移で完全にリフレッシュさせたいときに はこの方法を使用します。


<ul>
<li><a href="#page1">ページ1へ</a></li>
<li><a href="#page2">ページ2へ</a></li>
<li><a href="#googlemap" data-ajax="false" data-transition="flip">Googleマップ</a></li>< /ul>

 

フッター

3-3 Ajaxを用いないリンク(2)―外部サイトだと明示する方法


リンク先を記述しているリンク要素(a)に、rel="external"を記述すると、「これは外部サ イトへのリンクだ」とjQuery Mobile に明示的に示したことになり、Ajax によるページ遷移 は行われず、通常のリンクとして動作します。
同一ドメイン内に、複数の異なったサイトを運営している場合もあるかと思いますが、そ ういったときは、Ajax 遷移による遷移アニメーションを他サイトへのリンクの際も付けてし まうと紛らわしくなってしまいます。セマンティック的にきちっとこのrel="external"を記 述し、論理的には外部サイトへのリンクだと明示しましょう。
Ajax 遷移をしない場合は、別ファイルへの遷移アニメーションも表示されません。


<ul>
<li><a href="#page1">ページ1へ</a></li>
<li><a href="#page2">ページ2へ</a></li>
<li><a href="anothersite_inmydomain/index.html" rel="external" data-transition="flip">他のサイトへ(遷移アニメーション指定しても指定が反映されません。)</a></li>< /ul>

 

フッター

3-4 Ajaxを用いないリンク(3)―外部ドメインへのリンクを記述する


単純にリンク先が外部ドメインである場合、jQuery Mobile ではAjax によるページ遷移は 行われなくなります。
Ajax 遷移をしない場合は、別ファイルへの遷移アニメーションも表示 されません。


<ul>
< li><a href="#page1">ページ1へ</a></li>
< li><a href="#page2">ページ2へ</a></li>
< li><a href="http://anotherdomains.com/" data-transition="flip">外部URLへ(遷移アニメーションを指定しても表示されません。)</a></li>
< /ul>

?

 

フッター

3-5 Ajaxを用いないリンク(4)―target指定をする


リンク先を記述しているリンク要素(a)にtarget指定をすると、jQuery Mobile ではAjax によるページ遷移は行われなくなります。
Ajax 遷移をしない場合は、別ファイルへの遷移アニメーションも表示されません。


<ul>
< li><a href="#page1">ページ1へ</a></li>
< li><a href="#page2">ページ2へ</a></li>
< li><a href="#page3" target="blank">ページ3へ(遷移アニメーションを指定しても表示されません。)</a></li>
< /ul>

 

フッター

3-6 ブラウザの「戻る」リンクを作る

戻る
(注:但しこの前にブラウジングの履歴がある場合のみ有効です。)


リンク要素(a) に「data-rel="back"」を指定することで、ブラウザの戻ると同じ動作をするリンクを作るこ とができます。


<p>
< a href="#" data-rel="back">戻る</a><br>(注:但しこの前にブラウジングの履歴がある場合のみ有効です。)
< /p>

 

フッター

3-7 遷移しないリンクを作る

戻る


リンク先に"#"と指定すると、何も動作しないリンクを作成することができます。
リンク要 素(a)を単なるリンクではなく、Javascript などで何か動作を付けたい場合に使うと便利で す。


<p>
< a href="#">戻る</a></li>
< /p>

 

フッター

Page Effects (3-8 to 3-13)

切り替え効果を設定するには data-transition 属性をリンク要素(a)に指定してください。利用可能な値は、次の通りです。ver.1.1.0でturnとflows、そしてlidefadeの新たに3つが追加されています。ページ遷移エフェクトのFirefoxの対応もされました。

フッター

3-14 ページ遷移エフェクトを逆方向にする

ページ遷移エフェクトを逆方向にすることも出来ます。
リンク要素(a)に対して「data-transition="遷移エフェクト"」と併せて、「data-direction="reverse"」と指定することで、エフェクトが逆方向になります。以下をクリックしてみてください。エフェクトが逆方向になっています。

フッター

4-1-1 グリッドレイアウトを作成する

aaa

フッター

ページ3

ページ3

フッター

inserted by FC2 system