Stepper.js

JavaScript

数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンできるステッパーを実装することができるjQueryプラグインです。プラスとマイナスのボタンが設置されていて、これをクリックすることで数値をアップしたりダウンさせたりすることが可能です。

Stepper.js

デモ

デモでは、数値を入力するボックスの右側に「+」と「-」のボタンが設置されています。ここをクリックすると、数値がアップしたりダウンしたりします。もちろん、ボックス内に直接数値を入力することも可能です。

また、タッチにも対応しているのでスマホからの操作もとてもしやすいのがいいですね。ボタンを押しながら数値を手軽に調節できるので、ユーザーにはうれしい機能といえます。

また、Stepper.jsにはオプションもいくつか用意されています。具体的には、step、min、max、debounceといった項目があります。

デモでは数値が「1」ずつ増減されますが、オプション項目の「step」の値を調節することで、他の増減幅の数値に設定することが可能です。小数点でもOKみたいですよ。

その他、「min」には最小数値を、「max」には最大数値を指定することもできます。

ちなみに、minやmax、stepといったセッティングはHTMLのinputタグ内に直接指定できるので、とても便利です。

実装方法もシンプルでわかりやすいことから、手軽に使えるのがいいですね。

というわけで、数値を手軽にアップ・ダウンできるステッパーを実装できるjQueryプラグイン「Stepper.js」のご紹介でした。

Stepper.js

Inspiration for Grid Loading Animationsグリッドアイテムをかっこよく表示するアニメーション「Inspiration for Grid Loading Animations」前のページ

スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」次のページSweetDropdown

関連記事

  1. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  3. Grasp Mobile Progress Circle
  4. waslidemenu
  5. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  6. jQuery Pit-scheduler v2.0

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP