Skip to content
Browse files

Added enhancements to ui.spinner as seen at…


Enhancements include:
- removal of all hardcoded styling for better theming capability
- visual test page made more appealing supporting browser zooming
- added utility functions to disable, enable and destroy ui.spinner
- up/down buttons listens to more mouse and keyboard events
- support for decimal and currency format
- ui.spinner now restricts input on keydown
- cleanup occurs when the input textbox loses focus. this seems to be a better approach for future scalability
  • Loading branch information
Ca-Phun Ung
Ca-Phun Ung committed Aug 19, 2008
1 parent b4e2e0e commit 198d809f9bb8aa5a20181d8b4d0a2f58bbcc4179
Showing with 345 additions and 79 deletions.
  1. BIN tests/images/spinner-bg.gif
  2. +114 −16 tests/visual/spinner.html
  3. +231 −63 ui/ui.spinner.js
Binary file not shown.
@@ -1,45 +1,143 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Spinner Test page</title>
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.spinner.js"></script>


<script type="text/javascript">

var opts = {
's1': {},
's2': {stepping: 0.25},
's3': {currency: '$'}

for (var n in opts)

var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
if (ns != null)
$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);


<style type="text/css">
body {
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
background: #fff;
font-family: Arial;

.ui-spinner-down, .ui-spinner-up {
background: #999;
width: 100%;
label {
float: left;
margin-right: .5em;
padding: .15em 0;
font-weight: bold;

.ui-spinner {
border: 1px solid black;
width: 15em;
display: block;
position: relative;
overflow: hidden;
border: 1px solid #999;
background: #FEFEFE url(../images/spinner-bg.gif) repeat-x left bottom;
padding: 0 5px;

.ui-spinner-disabled {
background: #F4F4F4;

.ui-spinner-box {
width: 90%;
height: 100%;
float: left;
font-size: 125%;
border: none;
background: none;
padding: 0;

.ui-spinner-down {
width: 10%;
height: 50%;
font-size: 0.5em;
padding: 0;
margin: 0;
z-index: 100;
text-align: center;
vertical-align: middle;
position: absolute;
right: 0;
cursor: default;
border: 1px solid #999;
border-right: none;
border-top: none;

.ui-spinner-down {
bottom: 0;
border-bottom: 0;

.ui-spinner-pressed {
background: #FEFEFE;



<input type="text" id="input" />
<h1>jQuery UI Spinner Test Page</h1>

<p>This is a visual test page for developers and demonstrates some of the features included in ui.spinner. Mousewheel support is provided by the <a href="">mousewheel plugin</a>.</p>

<p><label for="s1">Basic: </label>
<input type="text" id="s1" value="10" /></p>

<button id="s1-disable">disable</button>
<button id="s1-enable">enable</button>
<button id="s1-destroy">destroy</button>
<button id="s1-create">create</button>

<hr />

<p><label for="s2">Decimal: </label>
<input type="text" id="s2" value="10.25" /></p>

<button id="s2-disable">disable</button>
<button id="s2-enable">enable</button>
<button id="s2-destroy">destroy</button>
<button id="s2-create">create</button>

<hr />

<p><label for="s3">Currency: </label>
<input type="text" id="s3" /></p>

<button id="s3-disable">disable</button>
<button id="s3-enable">enable</button>
<button id="s3-destroy">destroy</button>
<button id="s3-create">create</button>

<hr />


0 comments on commit 198d809

Please sign in to comment.
You can’t perform that action at this time.