数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ

スクリプト

<link href="jquery.stepper.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.stepper.min.js" type="text/javascript"></script>

実装

既存のテキストボックスにclassもしくはidを付与して、実装するだけです。

$("#input1014").stepper();

オプション

type

"float" - 小数値 / "int" - 整数値

floatPrecission

数値：小数点以下桁数

true/false：ボタン表示有無

allowWheel

true/false：マウスホィール操作を許可するか

allowArrows

true/false：クリック(矢印)操作を許可するか

arrowStep

数値：クリック(矢印)による数値の増減ティック

wheelStep

数値：マウスホィールによる数値の増減ティック

limit

[]：下限・上限を設定
例：[-5,5]など

preventWheelAcceleration

true/false：一部で使用できるwheelアクセラの効/無効(true:無効/false:有効)

incrementButton

文字列：インクリメント(増)用のボタン文字 "▴"

decrementButton

文字列：デクリメント(減)用のボタン文字 "▾"

他プラグイン
Bootstrap TouchSpin jQuery UI Spinner Spinner

: レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。ダウンロードスクリプト実装 $(document).ready

: 画像ズームプラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームするというような機能があるようです。

: 数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちらスクリプト

: Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。ダウンロード *黄色ボタン