English | Japanese

Introduction

jquery.drag-spinbox.js is a simple jQuery plugin that provide a draggable spinbox user interface.

SampleDemoPage

How to Setting

1. Prepare there scripts

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

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

2. Include scripts use script tag.

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

3. Make "input" box and "div" block for Handle.

<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. Add "dgsp-foo" class for the "input" box. ( "foo" is arbitrary name )

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

4. Add "dgsp-foo-b" class for the "div" box. ( "foo" is the same )

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

Options

Event Controls

dgsp.onspin

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