jQuery Spin
概要
jQuery Spinは、jQueryのプラグインとして動作します。
入力フォームで数値を扱うことがありますが、その際の入力補助用のインターフェースです。
動作
以下のフィールドに、数値を入力します。右側の上下のスピンボタンを使うと便利です。
マウスを押したままにすると、連続して値が変化します。
使い方
まずjQuery本体が必要になります。
jQueryそのものの導入については、別途ドキュメントなどを参照してください。
jQuery Spinは、から入手してください。
まず最初にスクリプトの配置と共に、スピンボタンの表面画像を配置しなければなりません。
画像は「押されていない状態」「上が押された状態」「下が押された状態」の3枚が必要です。
サンプルとして、ダウンロードファイルにも画像が入っているので、参考にしながら独自の見た目を作ってください。
3枚の画像は、同じディレクトリに置かなければいけません。ここでは仮に、”/images/spin/”に配置したとします。
スピンボタンの設定は、spinメソッドを呼ぶだけで簡単に行うことが出来ます。
オプションには様々なものがありますが、画像の場所指定だけはきちんと行わないと、全く動作しなくなってしまいます。
$('input').spin({imageBasePath: '/images/spin/'});
画像の場所を示すimageBasePathオプションの初期値は”/img/spin/”です。この場所に置いた場合のみ、指定は省略できます。
しかし、ページに複数のスピンボタンを設置する場合など、毎回同じオプションを指定するのも馬鹿馬鹿しい場合があります。
そんな時は、$.spinオブジェクトに値を設定することで、すべての呼び出しの初期値を変えることができます。
$.spin.imageBasePath = '/images/spin/';
$('#sample1').spin();
$('#sample2').spin();
$('#sample3').spin();
この例では、3つのspinの呼び出し全てに”/images/spin/”が適用されます。
オプション
jQuery Spinは、多くのオプションで動作を指定することができます。
オプションは多くのプラグイン同様に、メソッドの引数としてオブジェクトを渡してやることで指定できます。
指定可能なオプションは、次の通りです。
$.spinオブジェクトの値を変えることで、オプションの初期値を変えてしまうことも可能です。
ここでは、幾つかのオプションを組み合わせた例を見てみましょう。
$('#sample1').spin({
imageBasePath: 'http://dev.screw-axis.com/jquery-spin/demo/img/spin2/',
interval: 10,
max: 300,
min: 0,
timeInterval: 250
});
[実行結果]
プロジェクトサイト
- 本家プラグインリポジトリ
- github
ライセンス
コードにも記載していますが、MITとGPLのデュアルライセンスとします。
全く自由に使っていただいて構いませんが、どこかで利用したり紹介していただいた際は、ご一報いただけると喜ぶと思います。
上記サイトで使わせていただいています。
とても便利になりました。ありがとうございます。
(メールアドレスはダミーです。ごめんなさい。)
Works very nicely. If you update it again, I’d suggest taking into account the style of the input so that the updown buttons would be created properly even if position was set to absolute. Obviously the workaround is to surround the input with a div.
I see. I might do this when I have a time. Thanks your suggestion!
シンプルで使いやすいプラグインでを発見できて喜んでおります。
問題なく設置できたのですが、カスタマイズで少々悩んでおります。
左右矢印の画像を用意するのを前提に、上下ではなく、左右で値を変化させる方法はありますでしょうか。
height() で上下を区切っている（？）というのは理解できたのですが、左右で分ける方法、また、上下と左右を同じフォーム上で共存させる方法（クラスなどで分ける？）で行き詰っています。
急いでいませんので、お時間のある時にヒントでもいただければ幸いです。
> miyazawaさん
激遅レスすみません。おそらくもう無意味だと思いますが、一応。
左右スピンを置きたければ、プラグイン最後のmousedownでクリック位置によって値のup/downを判別しているので、そのアルゴリズムを変えてしまえば良いハズです。ここの判別部分を別関数にして、オプションでコールバックできるようにしておけば良かったですね。
もう全然更新していないプラグインですが、タイミングがあれば他の要望とまとめてアップデートしておきます。
とても便利なものでしたので、紹介させて頂きました。
ありがとうございます。