スピンボタンを作る
テキストボックスの値を上下にマウスで変更できる、スピンボタンを作成します。本家サイトでプラグインを公開しましたので、よければ利用して下さい。
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" />