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

関連記事

  1. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  2. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  3. OverlayScrollbars
  4. jquery.horizonScroll.js
  5. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  6. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP