jQuery UI逆引きリファレンス
Spinnerウィジェットで数値入力ボックスを生成するには？
数値入力ボックスを実装するためのSpinnerウィジェットの基本的な使い方について紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Spinnerは、数値入力ボックスを実装するためのウィジェットです。標準的なテキストボックスの脇に、表示されている数値を増減させるためのアップダウン・ボタン（スピン・ボックス、スピナーと言います）を付与します。
HTML5でも、<input type="number">要素で基本的な数値入力ボックスを作成できますが、Spinnerウィジェットでは、後で述べるようにオプションを与えることで、挙動や見栄えをさまざまにカスタマイズできます。そもそも<input type="number">要素でも、スピナーを表示しないブラウザーもまだあります。当座は、jQuery UIのお世話になる局面は多いでしょう。
基本的な数値入力ボックス
まずは、基本的な数値入力ボックスの例からです。以下に、具体的なコードと、実行例を示します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spinnerウィジェット</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() {
// 2
$('#price').spinner({
max: 10000,
min: 100,
step: 10
});
});
</script>
</head>
<body>
<label for="price">価格</label>：
<input id="price" type="text" value="1000" size="5" /> <!-- 1 -->
</body>
</html>
|
Spinnerを利用するには、スピナー機能を適用するテキストボックスを用意したうえで（1）、2のようにspinnerメソッドを呼び出すだけです。テキストボックスのtype属性の値は「text」としておきます。意味的には「number」ですが、「number」にすると、ブラウザーによっては、ブラウザー標準のスピナーとjQuery UIのスピナーが重複して表示されてしまいます（次の画面を参照）。
spinnerメソッドで指定できる基本パラメーターには、以下のようなものがあります。
| パラメーター | 概要 |
|---|---|
| min | 入力可能な最小値 |
| max | 入力可能な最大値 |
| step | 増減ボタンでの増分／減分 |
min／maxパラメーターを省略した場合、無制限に数値を増加／減少できます。stepパラメーターの値は、マークアップ側で<input>要素にstep属性を記述することでも指定できます。
spinnerメソッドのパラメーター
min／max／stepパラメーターのほかにも、spinnerメソッドにはさまざまなパラメーターが用意されています。以下に、主なものをまとめます（カッコの中はそれぞれのデフォルト値を表します）。
（1）incrementalパラメーター（true）
true（デフォルト）を指定すると、スピナーを押し続けた場合、増減量が増加します（＝ボタンを押し続けることで、増減が早くなります）。false指定では、stepパラメーターの値に従って、一定量で増減を続けます。
また、あまり利用することはないかもしれませんが、このパラメーターを関数型で指定することもできます。関数は、引数として「スピナーが連続して発生した回数」を受け取り、戻り値として新たな増減分を返す必要があります。
例えば以下は、引数countの値をそのまま戻り値として返していますので、押し続けるほど、増減のスピードが速まります。
|
$('#price').spinner({
incremental: function(count) {
return count;
}
});
|
（2）pageパラメーター（10）
Spinnerウィジェットはキーボード操作にも対応しており、フォーカスの当たった状態で［↑］［↓］キー、［Page Up］［Page Down］キーを押下することで数値を増減することもできます。［↑］［↓］キーの増減分はstepパラメーターの値に従うのに対して、［Page Up］［Page Down］キーの増減分を表すのがpageパラメーターの役割です。
（3）iconsパラメーター（{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }）
スピナーに表示するアイコン（矢印）を表します。利用できるアイコンは、Iconsで確認できます。
|
$('#price').spinner({
icons: {
down: "ui-icon-arrow-1-s",
up: "ui-icon-arrow-1-n"
}
});
|
（4）culture／numberFormatパラメーター
culture／numberFormatパラメーターを利用することで、カルチャ（地域）に応じた書式で数値を表示できます。
cultureパラメーターで現在のカルチャ（日本であれば「ja-JP」）を指定し、numberFormatパラメーターで数値の書式を指定します。利用できる書式には、以下のようなものがあります。「d1」のように末尾に数字を付与することで、小数点以下の桁数を指定することも可能です。
- ＊利用に当たっては、jQuery UIのダウンロード・パッケージの/development-bundle/externalフォルダに含まれる「globalize.js」「globalize.culture.ja-JP.js」（日本語の場合）をあらかじめインクルードしておく必要があります。
| 書式 | 概要 |
|---|---|
| n | 数値 |
| d | 10進数 |
| p | パーセント |
| c | 通貨 |
例えば以下は日本の通貨形式で、数値入力ボックスを表示する例です。
|
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="globalize.culture.ja-JP.js"></script>
……中略……
$('#price').spinner({
culture: 'ja-JP',
numberFormat: 'c',
});
|
なお、culture／numberFormatパラメーターを指定した場合、max／minパラメーターも「min: '\1,000'」のように書式を加味した文字列で指定できます。
※以下では、本稿の前後を合わせて5回分（第11回～第15回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
13. 【現在、表示中】≫ Spinnerウィジェットで数値入力ボックスを生成するには？
数値入力ボックスを実装するためのSpinnerウィジェットの基本的な使い方について紹介。
15. jQuery UIの拡張されたエフェクトを利用するには？（show／hide／toggle／effect編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
