Spin Button

semooh作。
Windowsなどでよく見る（最近は無い？）スピンボタンを実装します。
数値のテキスト入力ボックスに、上下の矢印が付いていて値を増減できるアレです。

Download

テキストボックスに

jg="spin"

と記述すると、スピン機能が付与されます。

<input type="text" jg="spin" value="0" />

但し、このプラグインはボタンの見栄えを画像で作っているため、自身の環境にあわせてイメージを配置したり、パスを指定する必要があります。
詳しくは後述のオプションを参照して下さい。

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

初期値は ”/img/spin/” です。
必ず、パスの最後は”/“まで入れて下さい。

ボタンの見栄えの各画像を設定します。

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

初期値は順に “spin-button.png”, “spin-up.png”, “spin-down.png” です。
これらの画像は、ダウンロードページにある spin-images.tar.gz にサンプル的なものが入っていますので、自分で用意したく無い場合は使って下さい。

ボタンが押された際に増減する値の量です。
例えば現在の値が10でintervalを3に設定していた場合、上ボタンを押せば13、下ボタンなら7になります。

<input type="text" jg="spin" jg:spin="interval:5" value="0" />

初期値は1です。

値の最大値/最小値です。
ボタンを上下させてもこの範囲までしか変化しませんが、テキストボックスに直接入力された場合は何でも入力されます。
もし直接の入力を禁止したい場合は、テキストボックスをlockするなどすると良いでしょう。

<input type="text" jg="spin" jg:spin="max:10,min:-5" value="0" />

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

初期値は共にnullです。

スピンボタンを押しっぱなしにした際に、値が変化する時間の間隔をミリ秒単位で設定します。

<input type="text" jg="spin" jg:spin="timeInterval:250" value="0" />

初期値は500です。

スピンボタンを押した際に、ボタンの見栄えがブリンクします。
その瞬く時間をミリ秒単位で設定します。

<input type="text" jg="spin" jg:spin="timeBlink:400" value="0" />

初期値は200です。

値やintervalに小数を設定することも可能ですが、常に浮動小数の精度の問題は発生します。
出来れば、小数の必要なものには使わないことをお勧めします。

<input type="text" jg="spin" jg:spin="interval:0.01" value="9.95" />