DG Spinner

Demo

Overview

This is free(LGPL), highly customizable javascript/dhtml spinner/spinbox widget.

Download

dg-spinner.zip

Files in package:

js/Spinner.js - Main javascript file for the widget
js/tests/* - JS Unit tests for the widget
images/ - Images.
css/ - CSS file for the widget.

You will also have to download the mootools library and include it on your page(s) with a script tag.

How to use this script

You can use this script to create a spinner/spinbox via Javascript or from existing html markup on your page

Create Spinner from markup

All you have to do is to include the js and css file used by this widget(Spinner.js and Spinner.css) as done in the demo and create one or more text inputs and assign them to the CSS class "DG-spinner".

Example:

When the Spinner.js file is included, it will search for input boxes of class "DG-spinner" and turn them into spinboxes.

Create Spinner dynamically via Javascript

This is an example:

HTML:

<TABLE>
  <tr>
    <td><label for="dynamicSpinner" id="labelDynamicSpinner">Dynamically created spinner: </td>
    <td id="spinboxcontainer"></td>
  </tr>
</TABLE>

We want to render our dynamically created spinbox inside TD with id "spinboxcontainer". We also want to "connect" it to the label with id "labelDynamicSpinner" in order to be able to nudge the label to change spinbox values. By nudging, I mean holding down the mousebutton on the label and move the mouse to the left or right to change the value of the spin box.

To accomplish this, we write this piece of code:

Here, we have created a new DG.Spinner Object with these properties:

renderTo: Where we want to render/display the spinner
id: Id of Spinners input element
name: Name of the input element. <input name="dynamicSpinner"...
label: Reference to an element used as a label. It doesn't have to be a <label> tag.
increment: How much to increment when you use the mouse wheel or click on the arrow buttons. (default = 1)
shiftIncrement: Increment value when the shift key is pressed down.
decimals: How many decimals to show (default = 0).
minValue: Minimum allowed value.
maxValue: Maximum allowed value.
value: Initial value.
disableWheel: true = Disable mouse wheel functionality. (default = false)
disableArrowKeys: true = Disable changing of values by using the up and down arrows from the keyboard. (default = false)
disabled: true = Disabling the component. (default = false)
styles: Custom styling you want to add to the input element.
buttonAlign: Alignment of buttons ("left" or "right") - Default = "left".