紹介

jquery.drag-spinbox.js はマウスでドラッグできるスピンボックスを提供するjQueryプラグインです。

サンプル デモページ

設置方法

1. 以下のスクリプトを用意します。

jquery-.js http://code.google.com/p/jqueryjs/

jquery.drag-spinbox.js http://code.google.com/p/jquery-drag-spinbox/downloads/list

2. HTMLのヘッダー(HEAD)に以下のインクルード宣言を行います。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.drag-spinbox.js"></script>

3. スピンボックスに使用する、テキストボックスとハンドル(div)をBODY内に用意します。

<table border="0">
  <tr>
    <td>
      <input type="text" value="0" id="test1" class="numbox" size="10" />
    </td>
    <td>
      <div class="numspin"></div>
    </td>
  </tr>
</table>

3. テキストボックスに "dgsp-????" classを追加します。("????"は任意名）

<input type="text" value="0" id="test1" class="numbox dgsp-foo" size="10" />

4. ハンドル(div)に"dgsp-????-b" classを追加します ("????"は上と同じもの）

<div class="numspin dgsp-foo-b"></div>

その他オプション（class定義)

イベントコントロール

dgsp.onspin

dgsp.onspin = function( inputid, val ){ 
  //Insert
}