jquery.stepper.jsは、マウス操作から手軽に値の増減を行うことができるjQueryプラグインです。input type=”text”による値を、マウスで直感的に増加させたり減少させたりできるので、とても楽ですね。オプションもいくつか用意されていますよ。
jquery.stepper.js
jquery.stepper.jsの実際のデモ動作は以下になります。
デモでは値が表示されたテキストボックスが全部で5つ設置されています。上からそれぞれ、50%、500%、20s、100px、2.55という値になっています。
各テキストボックスにマウスを乗せるとカーソルが左右矢印に変化するので、その状態で左右にドラッグすると、数値を増やしたり減らしたりすることが可能です。左に持っていくと値が減少し、右に持っていくと値が増加します。いちいち目的の数値をキーボードを使って入力する必要がないので、とても手軽でイイですね。
マウスによるシンプルな操作性を実現させたい人には、ピッタリの機能といえるのではないでしょうか。
また、jquery.stepper.jsにはオプションも用意されているのでちょっとしたカスタマイズも可能です。主なオプション項目は、selectorProgressBar、selectorInputNumber、classNameChanging、decimals、unit、value、min、max、stepです。
各オプション項目のデフォルト値は、selectorProgressBarが’.stepper-progress’、selectorInputNumberが’.stepper-number’、classNameChangingが’is-changing’、decimalsが0、unitが’%’、valueが”、minが0、maxが100、stepが1です。
というわけで、input type=”text”による値をマウス操作から簡単に増減させたいという人は、ぜひ「jquery.stepper.js」をチェックしてみてください。ラインセンスはMITになります。
jquery.stepper.jsの詳しい使い方やダウンロードは、以下のページからどうぞ。
