DG Spinner

Demo

Bookmark and Share

Overview

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

Download

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.

If you like my script, please rate it at HotScripts.com

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:

<input class="DG-spinner" maxlength="5" value="3" type="text">

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:

<script type="text/javascript">
var spinner = new DG.Spinner( {
  renderTo : 'spinboxcontainer',
  id:'dynamicSpinner',
  name: 'dynamicSpinner',
  label: 'labelDynamicSpinner',
  increment:0.1,
  shiftIncrement:1,
  decimals:1,
  minValue:5,
  maxValue:50,
  value:25,
  disableWheel:true,
  disableArrowKeys:true,
  styles: {
    width:'40px'
  }
});
</script>

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".

Comments

J!P
I like this spinner control, it is something I have always found an incomprehensible widget omission in html. However, if someone could tell me how to control the box' width while creating it from markup I can remove the small addition I just had to write to do that.Simply adding something like adding 'style: {anykey:somevalue}' to the properties property will fail for various reasons
J!P at 01:06PM, 2011/08/12.
J!P
sorry, 'style: {anykey:somevalue}' should be 'styles: {anykey:somevalue}' (added s)
<a href="#comment818">J!P wrote:</a>I like this spinner control, it is something I have always found an incomprehensible widget omission in html. However, if someone could tell me how to control the box' width while creating it from markup I can remove the small addition I just had to write to do that.Simply adding something like adding 'style: {anykey:somevalue}' to the properties property will fail for various reasons
J!P at 01:09PM, 2011/08/12.
J!P
Never mind, actually, when investigating further, it was just a matter of including an inline style attribute in the <input> tag.Tx...
J!P at 01:28PM, 2011/08/12.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com