jQuery日本語リファレンス

jQuery does not mean Japanese Query...

スピンボタンを作る

テキストボックスの値を上下にマウスで変更できる、スピンボタンを作成します。


本家サイトでプラグインを公開しましたので、よければ利用して下さい。
jQuery Spin Button | jQuery Spin (日本語)

利用方法

通常のHTMLでテキストボックスを用意し、spinメソッドを呼んでやります。
<input type="text" value="0" id="spin1" />
$(document).ready(function(){
	$("#spin1").spin();
});

オプションを指定することで、見栄えや挙動を変更できます。
$("#spin").spin({imageBasePath:"/images/spin/",max:100,min:0});

オプション

[imageBasePath]
見栄えの画像が入ったパスを指定します。

初期値は ”/img/spin/” です。
必ず、パスの最後は”/“まで入れて下さい。
[spinBtnImage / spinUpImage / spinDownImage]
ボタンの見栄えの各画像を設定します。

順に、「通常状態の画像」「ボタン上半部が押された時の画像」「ボタン下半部が押された時の画像」になります。

初期値は順に "spin-button.png", "spin-up.png", "spin-down.png" です。
これらの画像は、ダウンロードページにある spin-images.tar.gz にサンプル的なものが入っていますので、自分で用意したく無い場合は使って下さい。
[interval]
ボタンが押された際に増減する値の量です。
例えば現在の値が10でintervalを3に設定していた場合、上ボタンを押せば13、下ボタンなら7になります。

[max / min]
値の最大値/最小値です。
ボタンを上下させてもこの範囲までしか変化しませんが、テキストボックスに直接入力された場合は何でも入力されます。
もし直接の入力を禁止したい場合は、テキストボックスをlockするなどすると良いでしょう。
<input type="text" value="0" id="spin4" readonly="true" />
$("#spin4").spin({min:-5,max:10});

これらの値にnullが入っている場合、値の制限は無くなります。

初期値は共にnullです。
timeInterval
スピンボタンを押しっぱなしにした際に、値が変化する時間の間隔をミリ秒単位で設定します。
$("#spin").spin({timeInterval:250});

初期値は500です。
timeBlink
スピンボタンを押した際に、ボタンの見栄えがブリンクします。
その瞬く時間をミリ秒単位で設定します。
$("#spin").spin({timeBlink:400});

浮動小数演算について

値やintervalに小数を設定することも可能ですが、常に浮動小数の精度の問題は発生します。
出来れば、小数の必要なものには使わないことをお勧めします。
$("#spin").spin({interval:0.01});

jGlycyでの利用

jGlycyを用いれば、JavaScriptを記述しなくてもスピンボタンを実装できるようになります。
<input type="text" value="0" jg="spin" />