HOME > ライブラリ > jQuery Spin

jQuery Spin

jQuery Spin とは？

フォームの入力補助用のUIを提供してくれるjQueryのプラグイン。ジェネレーターサイトとかでよく見かける。 jQuery 日本語リファレンスを運営している？森直彦さんという方が作成されたjQueryのプラグイン。

使い方

日本の方が作成されたものなので、jQuery Spin | Screw-Axisに日本語で詳しく掲載されていますので参照してください。

サンプル

実行結果

Javascript

$(function(){
$('.spintest :input').spin({imageBasePath: '/javascripts/jquery-spin/img/spin1/'});
});

HTML

<div class="spintest">
<input type="text" value="0" class="border" />
</div>

サンプル

入力値の太さのボーダーを設定する。手動入力はOFF、最小値は0に設定。changedハンドラ内のthisはinput要素となるみたい。

実行結果

Javascript

$(function(){
$('.spintest2 :input').spin({
imageBasePath: '/javascripts/jquery-spin/img/spin1/',
lock: true,
min: 0,
changed: function(){
$('.spintest2').css('border', $(this).val() + 'px solid #00FFFF');
}
});
});

HTML

<div class="spintest2">
<input type="text" value="0" class="border" />
</div>

必須パラメーター

imageBasePath	スピンボタンの表面画像の配置場所を示します。初期値は”/img/spin/”ですが、ここに運良く置けるのでない限り、必須指定項目lとなるでしょう。 spinBtnImage/spinUpImage/spinDownImage 順に、「通常時」「上を押した時」「下を押した時」の画像ファイル名です。通常は変える必要は無いはずです。

オプション

interval	値の増減幅です。例えばここに”3″と指定すれば、上下ボタンで3ずつ値が変化します。小数値を設定することも可能です。初期値は1です。
max/min	入力可能な値の最大/最小値です。但し、直接入力の値を制限したりするものではないので、バリデーションには注意してください。値を設定しない場合、制限無しを意味します。
timeInterval	スピンボタンをマウスで押しっぱなしの状態にした際に、値の変化していく時間を決めます。小さな値を設定するほど、短い間隔で値が変化します。初期値は500(ミリ秒)です。
timeBlink	見栄えとしての上が押された/下が押された状態の画像を表示する時間です。初期値は200(ミリ秒)です。
btnClass	ボタン画像にあてられるクラス名です。
btnCss	ボタン画像にあてられるスタイルです。指定はCSSオブジェクトの形です。
txtCss	テキストエリアにあてられるスタイルです。
lock	テキストエリアへの直接入力を禁止したい場合にtrueにします。完璧に直接入力を防げるわけではなく、過信しすぎないよう注意してください。
decimal	小数点を”.”ではなくしたい場合に指定します。例えば”,”を指定すれば、”1.8″は”1,8″になります。
beforeChange	値がスピンボタンによって変更される前に呼ばれるコールバック関数です。第一引数にこれから変更されようとしている新しい値、第二引数には現時点の値が渡されます。戻り値にfalseを返した場合、その変更はキャンセルされます。
changed	値が変更された後に呼び出されるコールバック関数です。
buttonUp/buttonDown	上下のスピンボタンが押された際に呼び出されるコールバック関数です。値が上限を超えているなどの理由で変更されない場合にも呼び出されます。

参照サイト