jQuery Mobile その３（ボタン）

jQuery Mobileには、aタグや、form要素を角丸のボタンのように表示してくる機能があるので、とりあえずメモ。

aタグにdata-role="button" と属性を追加すると、ボタンに表示してくれる。
(記載例)

<a data-role="button">ボタン</a>

他に何も属性をつけないと、横方向に画面いっぱいの表示を行う。
data-inline="true"を追加すると、キャップション分の幅で表示してくれる。

ボタンにアイコンをつけることも可能で、その場合は、data-icon="xxxx"と指定する。
指定できるのは、標準で１6パターン（自分でCSSを定義すれば拡張は可能なようです）。

(指定可能なパターン）
delete
check
gear
minus
plus
arrow-l
arrow-r
arrow-d
arrow-u
refresh
forward
back
grid
star
alert

デフォルトでは、ボタンの左側に表示されるけど、data-i-conpos="xxx"で表示する場所や見せ方を指定できる。
（指定パターン）
　right：テキストの右側
　top：テキストの上
　bottom：テキストの下
　notext：テキストなしでアイコンのみ

フォームタグは自動的にボタンの表示にされるようです。
（対象タグ）
button,submit,reset,image


ボタンを複数並べる際に、グループ化して、きれいに並べることもできます。
その場合は複数のaタグなどをdivタグで括り、data-role="controlgroup"を属性として記載します。


（記載例）

   <div data-role="controlgroup">
       <a data-role="button">ボタン１</a>
       <a data-role="button">ボタン２</a>
   </div>

何もしないと垂直方向に並べますが（リストっぽい）、data-type="horizontal" を追加すると、水平方向へ並べて表示してくれます。