スポンサーリンク
スポンサーリンク

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

リンク(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”>

    サンプルコードの実行結果はこちら

アイコンを表示する

ヘッダやフッタにリンク先(ボタン)表示するときに、jQueryMobileに予め用意されているアイコンを設定できます。ダイアログの左上に表示される×印も後述の方法で表示しています。アイコンを追加するときは、data-icon属性でアイコンの名称を設定します。デフォルトは文字列の左側です。位置を変更するときはdata-iconpos属性で設定する。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました