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 Accordion
  2. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  3. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  4. Jquery progress indicator on page scroll
  5. Hamburger Icon Menu
  6. Material Design Responsive Table

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP