jQueryUIで増減ボタン付きのテキストボックス

パッケージ開発担当のよみです。

最近旅行にいけてないです連休にでも行きたいです。
さて、お仕事でjQueryUIのspinnerを使う機会があったので復習をかねて書きたいと思います。
全然難しくないのですが、デザインを細かく変えたいとか、数値の変化を細かく制御したいとかはかなりメンドウです。
いい方法があるのかも知れませんが。。。

とりあえず作る

jQueryUI導入の話は省略します、
以下のようにspinnerを設定してあげれば後はjQueryUIが勝手にやってくれます。
stepで増減数値、max/minで上限下限、numberFormatでどういう数値なのかが設定できます。

<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.remote_custom.min.js"></script>

<script type="text/javascript">
$(function() {
    //0～10を0.1刻み
    $("#value").spinner({
        step: 0.1,
        max: 10,
        min: 0,
        numberFormat: "n",
        ※1
    });
});
</script>

<label for="price"></label>
<input id="value" name="value" value="1.5">

上下どちらを押したか知りたい時

「spin」は数値が変化する前に発生するのでそこで、
変化前と変化後の値を比べて上下を判断する事ができます。

※1
spin: function(event, ui){
    //現在の値-変更後の値
    if (($(this).val()-ui.value) < 0) {
        //上が押された
    }else{
        //下が押された
    }
    ※2
}

以降のイベントを発生させない

「step」に設定した値ではなく、自分で制御する場合数値が変更されないように
以降発生するイベントを動かないようにする。

※2
event.preventDefault();
event.stopImmediatePropagation();

増減ボタンのみ有効にする

お仕事で使用した時、ユーザーに手動入力して欲しくないとの要望だったので、
以下のようにすれば、スピナーのみ有効になるようです。

$("#value").attr("readonly",true);

最後に

この機能のことをスピナーという名前だとはじめて知りました、
名前を知らなかったので調べるのに苦労しました。。。

イベント部分ですが、連続クリックは問題ないですが
長押しした際「spin」のイベントが飛ばされるような挙動が多々確認できました。
自分で制御している場合、かなり問題になってきますね。。。