*

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

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

リンク(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属性で設定する。

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

スポンサードリンク

関連記事

no image

<select>により項目選択

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

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

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

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

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

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

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

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

記事を読む

no image

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

ページ(page)とは

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

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

スポンサードリンク

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 ↑