Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Spinnerウィジェットで数値入力ボックスを生成するには?

2013年10月10日

数値入力ボックスを実装するための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のお世話になる局面は多いでしょう。

基本的な数値入力ボックス

 まずは、基本的な数値入力ボックスの例からです。以下に、具体的なコードと、実行例を示します。

HTML
<!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.html)
ボックス脇の増減ボタンをクリックすることで、数値を増減できる
ボックス脇の増減ボタンをクリックすることで、数値を増減できる

 Spinnerを利用するには、スピナー機能を適用するテキストボックスを用意したうえで(1)、2のようにspinnerメソッドを呼び出すだけです。テキストボックスのtype属性の値は「text」としておきます。意味的には「number」ですが、「number」にすると、ブラウザーによっては、ブラウザー標準のスピナーとjQuery UIのスピナーが重複して表示されてしまいます(次の画面を参照)。

type属性に「number」を指定した場合(Chrome環境での結果)
type属性に「number」を指定した場合(Chrome環境での結果)

 spinnerメソッドで指定できる基本パラメーターには、以下のようなものがあります。

パラメーター概要
min 入力可能な最小値
max 入力可能な最大値
step 増減ボタンでの増分/減分
spinnerメソッドの基本パラメーター

 min/maxパラメーターを省略した場合、無制限に数値を増加/減少できます。stepパラメーターの値は、マークアップ側で<input>要素にstep属性を記述することでも指定できます。

spinnerメソッドのパラメーター

 min/max/stepパラメーターのほかにも、spinnerメソッドにはさまざまなパラメーターが用意されています。以下に、主なものをまとめます(カッコの中はそれぞれのデフォルト値を表します)。

(1)incrementalパラメーター(true)

 true(デフォルト)を指定すると、スピナーを押し続けた場合、増減量が増加します(=ボタンを押し続けることで、増減が早くなります)。false指定では、stepパラメーターの値に従って、一定量で増減を続けます。

 また、あまり利用することはないかもしれませんが、このパラメーターを関数型で指定することもできます。関数は、引数として「スピナーが連続して発生した回数」を受け取り、戻り値として新たな増減分を返す必要があります。

 例えば以下は、引数countの値をそのまま戻り値として返していますので、押し続けるほど、増減のスピードが速まります。

JavaScript
$('#price').spinner({
  incremental: function(count) {
    return count;
  }
});
incrementalパラメーターを関数型で指定する例

(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で確認できます。

JavaScript
$('#price').spinner({
  icons: {
    down: "ui-icon-arrow-1-s",
    up: "ui-icon-arrow-1-n"
  }
});
iconsパラメーターの利用例
表示アイコンをカスタマイズ
表示アイコンをカスタマイズ

(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 通貨
numberFormatパラメーターで利用できる書式

 例えば以下は日本の通貨形式で、数値入力ボックスを表示する例です。

JavaScript
<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]を参照してください。

jQuery UI逆引きリファレンス
11. Dialogウィジェットでダイアログ・ボックスを生成するには?

Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。

jQuery UI逆引きリファレンス
12. JavaScriptからダイアログ・ボックスを動的に操作するには?

Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。

jQuery UI逆引きリファレンス
13. 【現在、表示中】≫ Spinnerウィジェットで数値入力ボックスを生成するには?

数値入力ボックスを実装するためのSpinnerウィジェットの基本的な使い方について紹介。

jQuery UI逆引きリファレンス
14. Sliderウィジェットでスライダーを生成するには?

ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。

jQuery UI逆引きリファレンス
15. jQuery UIの拡張されたエフェクトを利用するには?(show/hide/toggle/effect編)

jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。

サイトからのお知らせ

Twitterでつぶやこう!