Documentation

UI/Spinner

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Contents

[edit]

Depends On

NameType
Dependencies:

NameType

[edit]

Example

NameType
Example:
A simple jQuery UI Spinner.

$("#s1").spinner({max: 100, min: -100});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#s1").spinner({max: 100, min: -100});
  });
  </script>
  
</head>
<body>
  <style type="text/css">
/* UI Spinner */
body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	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;
	color: #CCC;
}

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

.ui-spinner-up,
.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;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.spinner.js"></script>

<p><label for="s1">Basic:</label> <input type="text" id="s1" /></p>
</body>
</html>

NameType

NameType
Example:
Currency Spinner.

$("#s2").spinner({currency: '$'});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#s2").spinner({currency: '$'});
  });
  </script>
  
</head>
<body>
  <style type="text/css">
/* UI Spinner */
body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	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;
	color: #CCC;
}

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

.ui-spinner-up,
.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;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.spinner.js"></script>

<p><label for="s2">Currency: </label>
<input type="text" id="s2" /></p>
</body>
</html>

NameType

NameType
Example:
DOM Spinner.

$("#s3").spinner();


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#s3").spinner();
  });
  </script>
  
</head>
<body>
  <style type="text/css">
/* UI Spinner */
body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	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;
	color: #CCC;
}

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

.ui-spinner-up,
.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;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}
</style>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc2/ui/ui.spinner.js"></script>

<p><label for="s3">Items: </label>
<ul id="s3">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>
	<li>item 7</li>
	<li>item 8</li>
	<li>item 9</li>
	<li>item 10</li>
	<li>item 11</li>
	<li>item 12</li>
	<li>item 13</li>
	<li>item 14</li>
	<li>item 15</li>
	<li>item 16</li>
	<li>item 17</li>
	<li>item 18</li>
	<li>item 19</li>
	<li>item 20</li>
</ul></p>
</body>
</html>

NameType

[edit]

Documentation

NameType
Plugin methods:



NameType
spinner( options )Returns: jQuery
Creates a Spinner widget.
spinner( "disable" )Returns: jQuery
Temporarily disables the spinner.
spinner( "enable" )Returns: jQuery
Enables the spinner.
spinner( "destroy" )Returns: jQuery
Completely remove the spinner.

[edit]

Events

The following events fire when interacting with the Spinner via keyboard or mouse:

  • spinup - during value increment.
  • spindown - during value decrement.
  • spin - during value increment/decrement.
  • spinchange - when increment/decrement finishes.

To handle any of the above custom events simply bind them to the Spinner.

Example HTML: 

<input type="text" id="#s1" />

Example JavaScript: 

// Initialize the Spinner on #s1 if not done so already.
$('#s1').spinner();

// Handle the Spinner change event.
$('#s1').bind('spinchange', function(event, ui) {

    // Place your code here.

});
[edit]

Keyboard

When the Spinner is in focus the following keyboard interactions become available:

  • UP - spin up.
  • DOWN - spin down.
  • HOME - to minimum (if specified) or back to start.
  • END - to maximum (if specified).
  • TAB - move focus inside spinner.
[edit]

Theming

The Spinner automatically applies the following CSS classes to specific elements:

  • ui-spinner - the spinner's encasing.
  • ui-spinner-disabled - indicates the spinner is in a disabled state.
  • ui-spinner-box - the container holding the value.
  • ui-spinner-up - the increment button
  • ui-spinner-down - the decrement button
  • ui-spinner-pressed - indicates a button is in the pressed state.
  • ui-spinner-list - for DOM lists.
  • ui-spinner-listitem - for DOM list items.

So as an example if your mark-up looks like this: 

<input type="text" id="s1" value="10" />

The generated mark-up ends up like this: 

<div class="ui-spinner">
  <input class="ui-spinner-box" type="text" id="s1" value="10" autocomplete="off" />
  <button class="ui-spinner-up" type="button">▲</button>
  <button class="ui-spinner-down" type="button">▼</button>
</div>
[edit]

Demos

Retrieved from "http://docs.jquery.com/UI/Spinner"