jquery.stepper.js

JavaScript

マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

jquery.stepper.jsは、マウス操作から手軽に値の増減を行うことができるjQueryプラグインです。input type=”text”による値を、マウスで直感的に増加させたり減少させたりできるので、とても楽ですね。オプションもいくつか用意されていますよ。

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

Lena.js多彩な画像処理ができるJSライブラリ「Lena.js」前のページ

固定されたリンクを表示させられる「Docked Link jQuery Plugin」次のページDocked Link jQuery Plugin

関連記事

  1. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  2. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  3. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  4. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  5. gridscrolling.js

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP