Buttonウィジェットとなる要素は、クリックに反応できるものであれば良いのだが、多くは<button>、<a>、<input type="submit">、<input type="reset">、<input type="button">、<input type="radio">、<input type="checkbox">あたりを用いることになるだろう。

これらのうち<input type="radio">、<input type="checkbox">では、クリックしたときの状態がボタンにも反映され、デフォルトのテーマSmoothnessでは、checked=falseのときが通常のボタンで、checked=trueのときに白抜きになる。

また、後述のbuttonsetメソッドによってButtonウィジェットを生成する場合は、それをまとめる親要素が必要になる。

Buttonウィジェットを生成するメソッド

• jQuery(...).button() - 単独のボタンを生成する
• jQuery(...).buttonset() - 複数のボタンがくっついた形のボタンを生成する

Buttonウィジェットを生成するメソッドにはbuttonとbuttonsetの2つがある。buttonは1つの要素から単独のウィジェットを生成するので、jQuery(...)にはウィジェットとなる要素を設定する(表示例は前ページ参照)。

<button id="widget">ボタン</button>

jQuery( '#widget' ).button();

一方buttonsetのほうは、jQuery(...)内にある複数の子要素および子孫要素をそれぞれウィジェットとし、互いにくっついたような外観にする。つまりjQuery(...)に設定するのはウィジェットとなる要素ではなく、それらをまとめる親要素ということになる(表示例は前ページ参照)。

<div id="widget" style="font-size: 9pt;">
  <button>ボタン1</button>
  <label for="radio">ボタン2</label><!-- 白抜きのボタン(Smoothness) -->
  <input id="radio" type="radio" value="ボタン2" checked="checked" />
  <a href="javascript:void(0);">ボタン3</a>
</div>

jQuery( '#widget' ).buttonset();

<a>がスペースキーに反応する

<a>要素からButtonウィジェットを生成すると、フォーカスが当たっているときに押されたスペースキーでクリックを代用してくれるようになる。そのため、要素が<a>であっても、Buttonウィジェットが生成されたあとは<button>などと同じような操作ができるボタンとして機能する。

Buttonウィジェットのオプション

Buttonウィジェットのオプションには以下がある。これらの設定によりどんなボタンを表示するかが決まる。いったん設定した後に変更しても良い。

Buttonウィジェットのオプション(太字はデフォルト)

• disabled
  falseのとき、ボタンがクリック可能になり、表示は濃くなる(デフォルト)。 trueのとき、ボタンがクリック不可になり、表示は薄くなる。

• icons
  primary, secondaryという2つのプロパティを持つオブジェクトで設定する。
  primaryはボタン左側のアイコン名称、secondaryはボタン右側のアイコン名称を表す。どちらかを省略しても良い。
  アイコン名称はclass属性の値として設定されるので、アイコン名称はあらかじめCSS(テーマ)で設定されているものに限られる。

• label
  ボタンに表示するテキストを設定する。デフォルトのテキストは設定済みの要素によって異なり、value属性の値、<label>や<button>などの子要素のテキストなどとなる。これにはHTMLタグも設定できるので多彩な表現が可能だが、ユーザーが入力した内容をこの値に設定するときは、タグを不可にするなどの注意が必要だ。

• text
  trueのとき、ボタンにテキストが表示される(デフォルト)。
  falseでアイコンが設定済みのとき、ボタンにはアイコンのみが表示される。

オプションの設定と参照 »

« jQuery UI1.8で追加されたウィジェット(Button編)