*

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

公開日: : 最終更新日: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

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

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

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

テーマを設定する

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

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

スポンサードリンク

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 ↑