リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQueryMobileを利用しないならaタグで囲まれたリンク先を示す文字列は青色で、文字列の下にアンダーバーが引かれています。
下記の表に挙げた属性をaタグに追加することで、リンクを画面に表示するときにアイコンを追加したり次のコンテンツを表示するときにアニメーションをつけたりと、入りいろな効果を付加できます。
| 設定対象 | 名称="設定値"(太文字はデフォルト) | 説明 |
|---|---|---|
| リンク先 | id="ID文字列" | 特定のページ(ページとなるタグに設定する) |
| data-rel="dialog" | リンク先のコンテンツをダイアログとして表示 | |
| data-rel="popup" | リンク先のコンテンツをポップアップとして表示 | |
| data-rel="back" | リンク先を前のページとする | |
| rel="external" | 別のドメインへのリンク | |
| アイコン | data-icon="アイコン名" | アイコンの配置 |
| data-iconpos="bottom|top|left|right" | アイコンを配置する位置 | |
| ページ遷移 | data-transition="fade|flip|slide|slidedown|slideup|pop" | リンク先に遷移する際のアニメーション |
| data-direction="reverse" | アニメーションを逆方向へ動作させるか | |
| data="true|false" | Ajaxによるページ遷移を行うか |
リンク先を設定する
jQueryMobileでは、画面の表示を次のページやHTML文書に切り替える方法が、一般的なブラウザの動作と違います。
- 同じHTML文書内の別ページ
- 特定のリンク先
jQueryMobileは、同じHTML文書内に複数ページを作成でき安栖が、リンクによって別のページに遷移できるようにするにはhref属性に「#ID属性の値」を設定します。これは以前の記事で書きました。
リンク先が特定のものを示したいとき、data-rel属性を追加する。
・前ページに戻る時は<a data-rel="back">
・リンク先がダイアログのときは<a data-rel="dialog">
・リンク先がポップアップのときは<a data-rel="popup">
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 特定のリンク先を試してみる</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <article data-role="content"> <p><a href="#dialog" data-rel="dialog">ダイアログ</a></p> <p><a href="#popup" data-rel="popup">ポップアップ</a></p> <div id="popup" data-role="popup"> <p>data-rel="popup"</p> <p><a href="#" data-rel="back">戻る</a></p> </div> </article> </section> <section id="dialog" data-role="page"> <header data-role="header"><h1>ダイアログ</h1></header> <article data-role="content"> <p>data-rel="dialog"</p> <p><a href="#" data-rel="back">戻る</a></p> </article> </section> </body> </html> |
アイコンを表示する
ヘッダやフッタにリンク先(ボタン)表示するときに、jQueryMobileに予め用意されているアイコンを設定できます。ダイアログの左上に表示される×印も後述の方法で表示しています。アイコンを追加するときは、data-icon属性でアイコンの名称を設定します。デフォルトは文字列の左側です。位置を変更するときはdata-iconpos属性で設定する。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile アイコンを表示する</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section data-role="page"> <header data-role="header" data-theme="a"> <h1>ヘッダ</h1> <a href="#" data-icon="arrow-l">arrow-l</a> <a href="#" data-icon="arrow-r">arrow-r</a> <a href="#" data-icon="arrow-u">arrow-u</a> <a href="#" data-icon="arrow-d">arrow-d</a> </header> <article data-role="content"> <p>アイコン表示テスト</p> </article> <footer data-role="footer" data-theme="c"> <h1>フッタ</h1> <a href="#" data-icon="delete">delete</a> <a href="#" data-icon="plus">plus</a> <a href="#" data-icon="minus">minus</a> <a href="#" data-icon="check">check</a> <a href="#" data-icon="gear">gear</a> <a href="#" data-icon="refresh">refresh</a> <a href="#" data-icon="forward">forward</a> <a href="#" data-icon="back">back</a> <a href="#" data-icon="grid">grid</a> <a href="#" data-icon="star">star</a> <a href="#" data-icon="alert">alert</a> <a href="#" data-icon="info">info</a> <a href="#" data-icon="home">home</a> <a href="#" data-icon="search">search</a> </footer> </section> </body> </html> |