jQuery UI逆引きリファレンス
Buttonウィジェットでさまざまなボタンを生成するには？
＜button＞、＜input type=”radio”＞、＜input type=”checkbox”＞、＜input type=”submit”＞、＜a＞といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Buttonウィジェットを利用することで、<button>、<input type="radio">、<input type="checkbox">、<input type="submit">、<a>といった要素を、一様にボタンに整形できます。特に要素に対して新たな機能を追加するというウィジェットではありませんが、jQuery UIを利用している場合には、何も考えずとも、ページに対して一貫性のあるスタイルを適用できる、というメリットがあります。
ボタンの基本
まずは、基本的な用法から見ていきます。以下は、Buttonウィジェットを利用して、さまざまな要素からボタンを生成する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Buttonウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2button／buttonsetメソッドでボタンに整形
$('button').button();
$('input[type="button"]').button();
$('input[type="submit"]').button();
$('a').button();
$('input.only').button();
$('.group').buttonset();
});
</script>
</head>
<body>
<!--1ボタンの基となる要素を準備-->
<div>
<button>Button（Element）</button>
<input type="button" value="Button（Input）" />
<input type="submit" value="Submit" />
<a href="http://www.wings.msn.to">Anchor</a>
<input id="ch0" type="checkbox" class="only" />
<label for="ch0">Check0</label>
</div>
<hr />
<div class="group">
<input id="ch1" type="checkbox" /><label for="ch1">Check1</label>
<input id="ch2" type="checkbox" /><label for="ch2">Check2</label>
<input id="ch3" type="checkbox" /><label for="ch3">Check3</label>
</div>
<hr />
<div class="group">
<input id="r1" type="radio" name="r" /><label for="r1">Radio1</label>
<input id="r2" type="radio" name="r" /><label for="r2">Radio2</label>
<input id="r3" type="radio" name="r" /><label for="r3">Radio3</label>
</div>
</body>
</html>
|
まずは、<input>／<button>／<a>要素を用意します（1）。この際、以下の点に注意してください。
- ラジオボタンやチェックボックスのキャプションは、<input>要素との関連が明確になるよう、<label for="...">要素で定義すること*1
- グループ化したいボタンは、<div>要素で対象の要素全体をくくること
- *1 ただし、ラベルはあとからbuttonメソッドのlabelパラメーターで指定することも可能です。
マークアップの準備ができたら、あとは2のようにbuttonメソッドとbuttonsetメソッドを呼び出すだけです。buttonメソッドは要素を単一のボタンとして、buttonsetメソッドは複数の要素をまとめて1つのボタンセットとして、それぞれ整形するためのメソッドです。buttonsetメソッドを呼び出した場合、ボタン同士は空白を詰め、グループの左右両端だけが角丸となるデザインが適用されます。
【参考】「:radio」などは使わない
jQueryでは、ラジオボタンやチェックボックスなどのフォーム要素を取得するために、「:radio」「:checkbox」「:button」などのセレクターを用意しています。が、これらはいずれもjQueryの拡張セレクターであり、querySelectorAllメソッドなどの標準APIに頼ることができません（独自に処理しなければならないので、遅いということです）。
これらのセレクターは、いずれも「[type="radio"]」のような属性セレクターで置換が利きますので、こちらで置き換えるべきです。
アイコン付きのボタンを作成する
buttonメソッドでiconsパラメーターを指定することで、アイコン付きのボタンを生成することもできます（次のコードを参照）。
|
<script type="text/javascript">
$(function() {
// 1アイコンをボタン左に表示
$('button.left').button({
icons: {
primary: 'ui-icon-home'
}
});
// 2アイコンをボタン右に表示
$('button.right').button({
icons: {
secondary: 'ui-icon-triangle-1-e'
}
});
// 3アイコンをボタン左右に表示
$('button.second').button({
icons: {
primary: 'ui-icon-link',
secondary: 'ui-icon-carat-1-e'
}
});
// 4テキストを非表示に、アイコンのみ表示
$('button.notext').button({
icons: {
primary: 'ui-icon-alert'
},
text: false
});
});
</script>
……中略……
<button class="left">Home</button>
<button class="right">Details</button>
<button class="second">Link</button>
<button class="notext">Alert</button>
|
iconsパラメーターは、以下のキーを持つハッシュとして指定します。
| キー | 概要 |
|---|---|
| primary | テキスト左に表示するアイコン |
| secondary | テキスト右に表示するアイコン |
利用できるアイコンは、ThemeRoller下部の［Framework Icons］に列挙されています。目的のアイコンにマウス・ポインターを当てると、以下のようにツールヒントとして名前が表示されます。
一般的にアイコンを1つだけ表示する際にはprimaryキーを利用しますが（1）、ボタンの右側に表示するならば、secondaryキーだけを指定しても構いませんし（2）、もちろん、ボタン左右にアイコンを表示するならば両方のキーを指定しても構いません（3）。
さらに、textパラメーターを「false」にすることで、アイコンだけの表示もできます（4）。
ツールバー風のボタンセットを作成する
Buttonウィジェットの機能ではありませんが、以下のようにjQuery UI標準のスタイルを適用することで、ツールバー風のボタンセットを生成することもできます。
|
<div class="ui-widget-header ui-corner-all" style="padding: 10px;">
<button id="home">Home</button>
<button id="config">Config</button>
<button id="delete">Delete</button>
<button id="contact">Contact</button>
<button id="help">Help</button>
</div>
|
class属性に指定した「ui-widget-header」は、ウィジェットのヘッダー部に適用されるスタイル、「ui-corner-all」は要素の四隅を丸めるためのスタイルです。jQuery UIでは、このほかにもさまざまな標準のスタイル・クラスを提供しており、自前の要素に適用することでページ・デザインに統一感を持たせることができます。利用できるスタイルについては、CSS Frameworkも併せて確認してください。
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. 【現在、表示中】≫ Buttonウィジェットでさまざまなボタンを生成するには？
＜button＞、＜input type=”radio”＞、＜input type=”checkbox”＞、＜input type=”submit”＞、＜a＞といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。
