SpinControl v1
A jQuery plugin made by jerone.
Intro
Screenshot SpinControl
This jQuery plugin adds a new control to your toolbox: the SpinControl. The SpinControl is a textbox for numbers only with two buttons on the side that in- or decreases the number input. It's one that software can use for many years, but never made its way into the web. That's why I made this script with the same features and some extra ones.
Screenshot custom SpinControl
Some of the features are:
- Leave already supported number inputs alone (unless you want to override).
- Options like Min & Max values are possible, even another Step is an option.
- Using the Tab key will give focus to the buttons.
- Other keys like Up & Down, mouse events like mousewheel and key down for a few seconds will also in- or decrease the value.
- Not input bounded, so they can be used everywhere.
- No style is added in the script itself, so all is fully changeable with CSS. There's a little bit of help given via classes.
- Cross browser. Tested working in all major browsers: Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4. It should work with newer browsers and may work with older browsers, no promise until tested.
Options
Usage
HTML
Place the following code in the head of your page.
<!-- SpinControl style -->
<style type="text/css">
/* optional */
input {
margin: 0px;
padding: 0px;
width: 100px;
}
input[type=number] {
padding-right: 15px; /* at least image width */
text-align: right;
width: 85px;
}
input.number { /* should be same as type=number for IE and overriding */
padding-right: 15px; /* at least image width */
text-align: right;
width: 85px;
}
/* default style */
.spinControl {
height: 20px; /* 2x image height */
margin-left: -11px; /* image width */
position: absolute;
}
.spinControl.MOZ, .spinControl.IE6, .spinControl.IE7 { /* small fix */
margin-top: 1px;
}
.spinControl input.UP,
.spinControl input.DOWN {
cursor: pointer;
height: 10px; /* image height */
left: 0;
position: absolute;
width: 11px; /* image width */
}
.spinControl input.DOWN {
bottom: 0;
}
</style>
<!-- Mandatory JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-numeric.js"></script>
<script type="text/javascript" src="jquery-number-selector.js"></script>
<script type="text/javascript" src="jquery-spincontrol-support.js"></script>
<script type="text/javascript" src="jquery-spincontrol.js"></script>
<!-- SpinControl definition -->
<script type="text/javascript">
(function($) {
$(function() {
$(":number").addClass("number").spinControl({ folder: "images/" });
});
})(jQuery);
</script>
The SpinControl plugin must be called after the document is loaded.
You can use the following code in the body of your page.
<input type="number" /> <input type="number" max="10" min="-10" step="0.5" />
Images
The increase and decrease buttons exist of images. For your site style you can use your own images, but they need to be named according the following syntax:
- normal/default up
- : normal_top.jpg (
) - normal/default down
- : normal_btm.jpg (
) - hovered up
- : hover_top.jpg (
) - hovered down
- : hover_btm.jpg (
) - pressed up
- : down_top.jpg (
) - pressed down
- : down_btm.jpg (
) - readonly/disabled up
- : readonly_top.jpg (
) - readonly/disabled down
- : readonly_btm.jpg (
)
Settings
The order of usage for the settings is as followed (the higher the number, the more important):
- The defaults.
- Inline in the HTML.
- Via JavaScript called within the definition.
Download
A zip archive for this plugin is available here: jquery-spincontrol-1.0.zip (size: 17kb).
The zip archive contains the following files:
- jquery-spincontrol.js - actual plugin (size: 7kb).
- jquery-spincontrol-min.js - minified plugin version (size: 5kb).
- jquery-spincontrol-support.js - custom check if support already exist for spincontrol (size: 1kb).
- jquery-number-selector.js - custom selector :number (size: 1kb).
jquery-spincontrol-vsdoc.js - VSDoc documentation file (size: 0kb).- jquery-spincontrol.html - clean example page (size: 3kb).
- all needed images (size: 11kb).
Changelog
-
version 1.0 (8/15/2009):
- Initial release;
FAQ
Which versions of jQuery is this plugin compatible with?
This plugin is compatible with jQuery 1.3 and higher.
Which browsers is this plugin compatible with?
Tested working in Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4.
It should work with newer browsers and can work with older browsers, no promise until tested.
Does the plugin work with any other plugins?
There's no build-in support for other plugins.
Is there a VSDoc file available for this plugin?
Yes, there's a VSDoc file available on the download page.
What is VSDoc?
VSDoc is documentation format for Visual Studio.
By using this file information is added to JavaScript Intellisense. This is only available in VS2008.
Related information
- W3 HTML5 number input
- W3 HTML5 number input (dev)
- Spin Controls on MSDN
- JQuery Plugin: Web SpinButton / SpinBox Control
Known issues
- Opera doesn't use Spacebar to stimulate a click event. Any other browser do work. Use Enter instead.
Todo
- Add support for stepDown() and stepUp() methods.
- Make use of input and change events.
- Opera doesn't use spacebar to click.
Site Search