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

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  2. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  3. NO IMAGE
  4. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  5. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  6. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP