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"」
    テキスト有りのボタンなら3つくらいが適当かも。
    アイコンのみの小ボタンなら5つぐらい?
    <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のメモ★リスト編

0 comment:

コメントを投稿