Acid.JS Web 2.0 Component Library

SpinBox.JS 2.1

SpinBox.JS is an unobtrusive and almost codeless way to turn the ordinary input text boxes into cool looking, multifunctional and skinnable spin boxes.

All you have to do is to create a normal text input on the page, give it an ID, edit a few arguments, set a skin in the initialization script and hit F5 to view the amazing transformation.

SpinBox.JS Basic Functionality

SpinBox.JS supports all properties that can be applied to a normal text input element - enabled, disabled, name, alt, title, id and readonly. You may also separately enable or disable the increase or decrease buttons. The full version of the component supports keyboard navigation and month view mode.

Both Buttons and Input Enabled
Decrease Button Disabled and Input Enabled
Increase Button Disabled and Input Enabled
Both Buttons Disabled and Input Enabled
Readonly SpinBox.JS
Setting Min and Max Values

The spinbox below has a max value "5" and a min value "-5"

SpinBox.JS - Extended Functionality

Month View
Normal Month View

To render a SpinBox.JS with a month view, you have to set the last argument in the rendering function to "months", i.e:

renderSpinBox('SpinBox1', demoSkin, true, true, 'Please, select month', '80', 'months');
Upper Case Roman Month View

To render a SpinBox.JS with a upper roman case view, you have to set the last argument in the rendering function to "monthsRomanUpper", i.e:

renderSpinBox('SpinBox1', 
 demoSkin, true, true, 'Please, select month', '80', 'monthsRomanUpper');
Lower Case Roman Month View

To render a SpinBox.JS with a lower roman case view, you have to set the last argument in the rendering function to "monthsRomanLower", i.e:

renderSpinBox('SpinBox1', 
 demoSkin, true, true, 'Please, select month', '80', 'monthsRomanLower');

If the default falue of your spinbox should be December, the initial value of the input should be 11, not 12, for example:

<input type="text" 
 name="Months" id="Months" alt="Choose Month" title="Choose Month" value="11" />

Will render:

Localization

SpinBox.JS can be localized, and the full version comes with a set of 10 language files.

To localize your spinboxes, add the following function in the <head>...</head> section of your page:

<script type="text/javascript">
spinBoxJsLanguage('en-US');
</script>

If you want to set German for default SpinBox.JS language, use the following:

<script type="text/javascript">
spinBoxJsLanguage('de-DE');
</script>

Browser Support

The component works with all major browsers.

  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla FireFox
  • Opera
  • Google Chrome
  • Apple afari

Differences Between the Lite and Full Version

The full version of SpinBox.JS ($10.00) comes with a set of 10 predefined skins, 10 language files and keyboard arrow keys navigation, while the Lite version, which is available for a free download displays a credit message at the bottom of each spinbox, a single skin and a single language file.