bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」JavaScript2017.04.13数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンできるステッパーを実装することができるjQueryプラグインです。プラスとマイナスのボタンが設置されていて、これをクリックすることで数値をアップしたりダウンさせたりすることが可能です。Stepper.js以下、Stepper.jsの実際のデモページです。デモデモでは、数値を入力するボックスの右側に「+」と「-」のボタンが設置されています。ここをクリックすると、数値がアップしたりダウンしたりします。ボックス内に直接数値を入力することも可能です。タッチにも対応しているのでスマホからの操作もとてもしやすいのがいいですね。ボタンを押しながら数値を手軽に調節できるので、ユーザーにはうれしい機能といえます。Stepper.jsにはオプションもいくつか用意されています。具体的には、step、min、max、debounceといった項目があります。デモでは数値が「1」ずつ増減されますが、オプション項目の「step」の値を調節することで、他の増減幅の数値に設定することが可能です。小数点でもOKみたいですよ。その他、「min」には最小数値を、「max」には最大数値を指定することもできます。ちなみに、minやmax、stepといったセッティングはHTMLのinputタグ内に直接指定できるので、とても便利です。実装方法もシンプルでわかりやすいことから、手軽に使えるのがいいですね。いうわけで、数値を手軽にアップ・ダウンできるステッパーを実装できるjQueryプラグイン「Stepper.js」のご紹介でした。Stepper.jsの詳しい使い方やダウンロードは、以下のページからどうぞ。...JavaScriptタッチフレンドリーでモバイルでも快適に動作する「simplelightbox」simplelightboxはレスポンシブ対応でタッチフレンドリーなl...JavaScriptデザインもシンプルで素敵なレスポンシブのjQueryスライダー「Blueberry」を使ってみたとてもシンプルで素敵なjQueryスライダー「Blueberry」を使...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。