jQuery Mobileのメモ★リンクボタン編

jQuery Mobileで作るWebサイト。リンクに関する覚書です。

公式デモ
jQuery Mobile: Demos and Documentation
※Google ChromeなどHTML5に対応しているブラウザ、またはスマートフォンで確認してください。

※以下の内容は、自分用メモを兼ねています。
※見よう見まねでやっているので、間違いもあるかと思います。問題があった場合には、自己責任で解決をお願いしますm(_"_)m

• リンクをボタンにするには「data-role="button"」
  デフォルトでは、画面の横いっぱいに広がるボタンになる。
  

  <a rel="external" data-role="button" href="hoge.html">hogeのページ</a>

• 小さなリンクボタンは「data-inline="true"」をつける
  

  <a rel="external" data-role="button" data-inline="true" href="hoge.html">hogeのページ</a>

• リンクボタンのグループ化「data-role="controlgroup"」
  画面いっぱいに広がる横長のボタンが、縦並びにグループ化される。
  

  <div data-role="controlgroup">
    <a rel="external" data-role="button" href="hoge1.html">hoge1のページ</a>
    <a rel="external" data-role="button" href="hoge2.html">hoge2のページ</a>
  </div>

• 小さなリンクボタンを横並びにグループ化するには「data-type="horizontal"」
  テキスト有りのボタンなら３つくらいが適当かも。
  アイコンのみの小ボタンなら５つぐらい？
  

  <div data-role="controlgroup" data-type="horizontal">
    <a rel="external" data-role="button" href="hoge1.html">hoge1のページ</a>
    <a rel="external" data-role="button" href="hoge2.html">hoge2のページ</a>
  </div>

• ボタンにアイコンを表示する「data-icon="star(*アイコンの種類)"」
  デフォルトでは、左側に表示される。
  アイコンの種類は、公式デモで確認できる。
  

  <a rel="external" data-role="button" data-icon="star" href="hoge.html">hogeのページ</a>

• ボタンのアイコンを右側に表示する「data-iconpos="right"」
  

  <a rel="external" data-role="button" data-icon="star" data-iconpos="right" href="hoge.html">hogeのページ</a>

• アイコンのみの小ボタン「data-iconpos="notext"」
  リンクテキストを指定していても、テキストは表示されない。
  

  <a rel="external" data-role="button" data-icon="star" data-iconpos="notext" href="hoge.html">hogeのページ</a>

関連記事
jQuery Mobileのメモ★基本編
jQuery Mobileのメモ★リスト編