数値の増減 number spinner

フォームの入力欄で数値の増減のライブラリです。

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.number-spinner.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.number-spinner.js"></script>

【JavaScript】

$(function() { $('.sample').numberSpinner(); });

【HTML】

<p><input type="text" name="num" value="0" class="sample" /></p>

オプション

以下の設定が可能です。

オプション名	初期値	説明
max	false	最大値 無制限の場合はfalseを指定
min	false	最小値 無制限の場合はfalseを指定
step	1	増減量
numberFormat	false	カンマ区切りにするかどうか 設定できる値：     true = 有効     false = 無効
zeroPadding	false	ゼロ埋めの桁数 無効の場合はfalseを指定
fixed	false	小数点の桁数を固定するかどうか 無効の場合はfalseを指定
input	true	キーボードやマウスでの入力を許可するかどうか 設定できる値：     true = 有効     false = 無効
prefix	''	接頭語
suffix	''	接尾語
upButtonText	'+'	増加ボタンの文字列
downButtonText	'-'	減少ボタンの文字列
wrapClass	'number-spinner'	機能させる要素を囲う要素のクラス名
buttonBoxClass	'up-down-buttons'	増減ボタンを囲う要素のクラス名
upButtonClass	'up'	増加ボタンのクラス名
downButtonClass	'down'	減少ボタンのクラス名
maxClass	'maximum'	最大値に達した場合に付与するクラス名
minClass	'minimum'	最小値に達した場合に付与するクラス名
error	'error'	エラー時のクラス名
buttonOutput	'after'	ボタンの出力先（配置） 設定できる値：     'after' = 入力欄の後へ配置     'before' = 入力欄の前へ配置     'both-ends' = 入力欄を挟むように配置     false = 配置しない（無効）
upFunction	function() {}	増加した時に実行する関数]
downFunction	function() {}	減少した時に実行する関数

$(function() { $('.sample').numberSpinner({ prefix : '$', numberFormat : true }); });

メソッド

以下のメソッドが実行可能です。

メソッド名	説明
$element.spinnerUp(callback)	数値を増加する。 引数には増加後に実行する関数を指定できる。
$element.spinnerDown(callback)	数値を減少する。 引数には減少後に実行する関数を指定できる。
$element.checkError()	エラーチェックを行う。 戻り値はBoolean値で、エラーがあった場合はtrue、エラーがなかった場合はfalseを返す。

$(function() { var $sample = $('.sample').numberSpinner(); $sample.spinnerUp(); });