testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/docs/spinner.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI spinner documentation</title>
   6
   7         <style>
   8         body {
   9                 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
  10         }
  11         .gutter {
  12                 display: none;
  13         }
  14         </style>
  15 </head>
  16 <body>
  17
  18 <script>{
  19                 "title":
  20                         "Spinner Widget",
  21                 "excerpt":
  22                         "\n\t\tEnhance a text input for entering numeric values, with up/down buttons and arrow key handling.\n\t",
  23                 "termSlugs": {
  24                         "category": [
  25                                 "widgets"
  26                         ]
  27                 }
  28         }</script><article id="spinner1" class="entry widget"><h2 class="section-title">
  29 <span>Spinner Widget</span><span class="version-details">version added: 1.9</span>
  30 </h2>
  31 <div class="entry-wrapper">
  32 <p class="desc"><strong>Description: </strong>
  33                 Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.
  34         </p>
  35 <section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
  36 </h2></header><div class="quick-nav-section">
  37 <h3>Options</h3>
  38 <div><a href="#option-culture">culture</a></div>
  39 <div><a href="#option-disabled">disabled</a></div>
  40 <div><a href="#option-icons">icons</a></div>
  41 <div><a href="#option-incremental">incremental</a></div>
  42 <div><a href="#option-max">max</a></div>
  43 <div><a href="#option-min">min</a></div>
  44 <div><a href="#option-numberFormat">numberFormat</a></div>
  45 <div><a href="#option-page">page</a></div>
  46 <div><a href="#option-step">step</a></div>
  47 </div>
  48 <div class="quick-nav-section">
  49 <h3>Methods</h3>
  50 <div><a href="#method-destroy">destroy</a></div>
  51 <div><a href="#method-disable">disable</a></div>
  52 <div><a href="#method-enable">enable</a></div>
  53 <div><a href="#method-option">option</a></div>
  54 <div><a href="#method-pageDown">pageDown</a></div>
  55 <div><a href="#method-pageUp">pageUp</a></div>
  56 <div><a href="#method-stepDown">stepDown</a></div>
  57 <div><a href="#method-stepUp">stepUp</a></div>
  58 <div><a href="#method-value">value</a></div>
  59 <div><a href="#method-widget">widget</a></div>
  60 </div>
  61 <div class="quick-nav-section">
  62 <h3>Events</h3>
  63 <div><a href="#event-create">create</a></div>
  64 <div><a href="#event-start">start</a></div>
  65 <div><a href="#event-spin">spin</a></div>
  66 <div><a href="#event-stop">stop</a></div>
  67 <div><a href="#event-change">change</a></div>
  68 </div></section><div class="longdesc" id="entry-longdesc">
  69                 <p>Spinner, or number stepper, widget is perfect for handling all kinds of numeric input. It allow users to type a value directly or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.</p>
  70
  71                 <p>Spinner wraps a text input, adds two buttons to increment and decrement the current value, along with handling key events for the same purpose. It delegates to <a href="https://github.com/jquery/globalize">Globalize</a> for number formatting and parsing.</p>
  72
  73                 <h3>Keyboard interaction</h3>
  74
  75                 <ul>
  76                         <li>UP: Increment the value by one step.</li>
  77                         <li>DOWN: Decrement the value by one step.</li>
  78                         <li>PAGE UP: Increment the value by one page.</li>
  79                         <li>PAGE DOWN: Decrement the value by one page.</li>
  80                 </ul>
  81
  82                 <p>Focus stays in the text field, even after using the mouse to click one of the spin buttons.</p>
  83         </div>
  84 <h3>Additional Notes:</h3>
  85 <div class="longdesc"><ul><li>
  86                         This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
  87                 </li></ul></div>
  88 <section id="options"><header><h2 class="underline">Options</h2></header><div id="option-culture" class="api-item first-item">
  89 <h3>culture<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
  90 </h3>
  91 <div class="default">
  92 <strong>Default: </strong><code>null</code>
  93 </div>
  94 <div>Sets the culture to use for parsing and formatting the value. If <code>null</code>, the currently set culture in <code>Globalize</code> is used, see <a href="https://github.com/jquery/globalize">Globalize docs</a> for available cultures. Only relevant if the <a href="#option-numberFormat"><code>numberFormat</code></a> option is set. Requires <a href="https://github.com/jquery/globalize">Globalize</a> to be included.</div>
  95 <strong>Code examples:</strong><p>Initialize the spinner with the culture option specified:</p>
  96 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ culture: </code><code class="string">"fr"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
  97 <p>Get or set the culture option, after initialization:</p>
  98 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">culture = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"culture"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"culture"</code><code class="plain">, </code><code class="string">"fr"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
  99 </div>
 100 <div id="option-disabled" class="api-item">
 101 <h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 102 </h3>
 103 <div class="default">
 104 <strong>Default: </strong><code>false</code>
 105 </div>
 106 <div>Disables the spinner if set to <code>true</code>.</div>
 107 <strong>Code examples:</strong><p>Initialize the spinner with the disabled option specified:</p>
 108 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 109 <p>Get or set the disabled option, after initialization:</p>
 110 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 111 </div>
 112 <div id="option-icons" class="api-item">
 113 <h3>icons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
 114 </h3>
 115 <div class="default">
 116 <strong>Default: </strong><code>{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }</code>
 117 </div>
 118 <div>
 119                                 Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
 120                                 <ul>
 121                                         <li>up (string, default: "ui-icon-triangle-1-n")</li>
 122                                         <li>down (string, default: "ui-icon-triangle-1-s")</li>
 123                                 </ul>
 124                         </div>
 125 <strong>Code examples:</strong><p>Initialize the spinner with the icons option specified:</p>
 126 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ icons: { down: </code><code class="string">"custom-down-icon"</code><code class="plain">, up: </code><code class="string">"custom-up-icon"</code> <code class="plain">} });</code></div></div></td></tr></tbody></table></div>
 127 <p>Get or set the icons option, after initialization:</p>
 128 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">icons = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code><code class="plain">, { down: </code><code class="string">"custom-down-icon"</code><code class="plain">, up: </code><code class="string">"custom-up-icon"</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
 129 </div>
 130 <div id="option-incremental" class="api-item">
 131 <h3>incremental<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
 132 </h3>
 133 <div class="default">
 134 <strong>Default: </strong><code>true</code>
 135 </div>
 136 <div>Controls the number of steps taken when holding down a spin button.</div>
 137 <strong>Multiple types supported:</strong><ul>
 138 <li>
 139 <strong>Boolean</strong>: When set to <code>true</code>, the stepping delta will increase when spun incessantly. When set to <code>false</code>, all steps are equal (as defined by the <a href="#option-step"><code>step</code></a> option).</li>
 140 <li>
 141 <strong>Function</strong>: Receives one parameter: the number of spins that have occurred. Must return the number of steps that should occur for the current spin.</li>
 142 </ul>
 143 <strong>Code examples:</strong><p>Initialize the spinner with the incremental option specified:</p>
 144 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ incremental: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 145 <p>Get or set the incremental option, after initialization:</p>
 146 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">incremental = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"incremental"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"incremental"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 147 </div>
 148 <div id="option-max" class="api-item">
 149 <h3>max<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
 150 </h3>
 151 <div class="default">
 152 <strong>Default: </strong><code>null</code>
 153 </div>
 154 <div>The maximum allowed value. The element's <code>max</code> attribute is used if it exists and the option is not explicitly set. If <code>null</code>, there is no maximum enforced.</div>
 155 <strong>Multiple types supported:</strong><ul>
 156 <li>
 157 <strong>Number</strong>: The maximum value.</li>
 158 <li>
 159 <strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>max</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options; otherwise it will fall back to the native <code>parseFloat()</code> method.</li>
 160 </ul>
 161 <strong>Code examples:</strong><p>Initialize the spinner with the max option specified:</p>
 162 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ max: 50 });</code></div></div></td></tr></tbody></table></div>
 163 <p>Get or set the max option, after initialization:</p>
 164 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">max = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"max"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"max"</code><code class="plain">, 50 );</code></div></div></td></tr></tbody></table></div>
 165 </div>
 166 <div id="option-min" class="api-item">
 167 <h3>min<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
 168 </h3>
 169 <div class="default">
 170 <strong>Default: </strong><code>null</code>
 171 </div>
 172 <div>The minimum allowed value. The element's <code>min</code> attribute is used if it exists and the option is not explicitly set. If <code>null</code>, there is no minimum enforced.</div>
 173 <strong>Multiple types supported:</strong><ul>
 174 <li>
 175 <strong>Number</strong>: The minimum value.</li>
 176 <li>
 177 <strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>min</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options; otherwise it will fall back to the native <code>parseFloat()</code> method.</li>
 178 </ul>
 179 <strong>Code examples:</strong><p>Initialize the spinner with the min option specified:</p>
 180 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ min: 0 });</code></div></div></td></tr></tbody></table></div>
 181 <p>Get or set the min option, after initialization:</p>
 182 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">min = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"min"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"min"</code><code class="plain">, 0 );</code></div></div></td></tr></tbody></table></div>
 183 </div>
 184 <div id="option-numberFormat" class="api-item">
 185 <h3>numberFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 186 </h3>
 187 <div class="default">
 188 <strong>Default: </strong><code>null</code>
 189 </div>
 190 <div>Format of numbers passed to  <a href="https://github.com/jquery/globalize"><code>Globalize</code></a>, if available. Most common are <code>"n"</code> for a decimal number and <code>"C"</code> for a currency value. Also see the <a href="#option-culture"><code>culture</code></a> option.</div>
 191 <strong>Code examples:</strong><p>Initialize the spinner with the numberFormat option specified:</p>
 192 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ numberFormat: </code><code class="string">"n"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 193 <p>Get or set the numberFormat option, after initialization:</p>
 194 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">numberFormat = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberFormat"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberFormat"</code><code class="plain">, </code><code class="string">"n"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 195 </div>
 196 <div id="option-page" class="api-item">
 197 <h3>page<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 198 </h3>
 199 <div class="default">
 200 <strong>Default: </strong><code>10</code>
 201 </div>
 202 <div>The number of steps to take when paging via the <a href="#method-pageUp"><code>pageUp</code></a>/<a href="#method-pageDown"><code>pageDown</code></a> methods.</div>
 203 <strong>Code examples:</strong><p>Initialize the spinner with the page option specified:</p>
 204 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ page: 5 });</code></div></div></td></tr></tbody></table></div>
 205 <p>Get or set the page option, after initialization:</p>
 206 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">page = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"page"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"page"</code><code class="plain">, 5 );</code></div></div></td></tr></tbody></table></div>
 207 </div>
 208 <div id="option-step" class="api-item">
 209 <h3>step<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
 210 </h3>
 211 <div class="default">
 212 <strong>Default: </strong><code>1</code>
 213 </div>
 214 <div>The size of the step to take when spinning via buttons or via the <a href="#method-stepUp"><code>stepUp()</code></a>/<a href="#method-stepDown"><code>stepDown()</code></a> methods. The element's <code>step</code> attribute is used if it exists and the option is not explicitly set.</div>
 215 <strong>Multiple types supported:</strong><ul>
 216 <li>
 217 <strong>Number</strong>: The size of the step.</li>
 218 <li>
 219 <strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>step</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options, otherwise it will fall back to the native <code>parseFloat</code>.</li>
 220 </ul>
 221 <strong>Code examples:</strong><p>Initialize the spinner with the step option specified:</p>
 222 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ step: 2 });</code></div></div></td></tr></tbody></table></div>
 223 <p>Get or set the step option, after initialization:</p>
 224 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">step = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"step"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"step"</code><code class="plain">, 2 );</code></div></div></td></tr></tbody></table></div>
 225 </div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
 226 <h3>destroy()</h3>
 227 <div>
 228                 Removes the spinner functionality completely. This will return the element back to its pre-init state.
 229         </div>
 230 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 231 <div>
 232 <strong>Code examples:</strong><p>Invoke the destroy method:</p>
 233 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 234 </div>
 235 </div></div>
 236 <div id="method-disable"><div class="api-item">
 237 <h3>disable()</h3>
 238 <div>
 239                 Disables the spinner.
 240         </div>
 241 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 242 <div>
 243 <strong>Code examples:</strong><p>Invoke the disable method:</p>
 244 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"disable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 245 </div>
 246 </div></div>
 247 <div id="method-enable"><div class="api-item">
 248 <h3>enable()</h3>
 249 <div>
 250                 Enables the spinner.
 251         </div>
 252 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 253 <div>
 254 <strong>Code examples:</strong><p>Invoke the enable method:</p>
 255 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"enable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 256 </div>
 257 </div></div>
 258 <div id="method-option">
 259 <div class="api-item">
 260 <h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
 261 </h3>
 262 <div>Gets the value currently associated with the specified <code>optionName</code>.</div>
 263 <ul><li>
 264 <div><strong>optionName</strong></div>
 265 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 266 </div>
 267 <div>The name of the option to get.</div>
 268 </li></ul>
 269 <div>
 270 <strong>Code examples:</strong><p>Invoke the  method:</p>
 271 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 272 </div>
 273 </div>
 274 <div class="api-item">
 275 <h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
 276 </h3>
 277 <div>Gets an object containing key/value pairs representing the current spinner options hash.</div>
 278 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 279 <div>
 280 <strong>Code examples:</strong><p>Invoke the  method:</p>
 281 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 282 </div>
 283 </div>
 284 <div class="api-item">
 285 <h3>option( optionName, value )</h3>
 286 <div>Sets the value of the spinner option associated with the specified <code>optionName</code>.</div>
 287 <ul>
 288 <li>
 289 <div><strong>optionName</strong></div>
 290 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 291 </div>
 292 <div>The name of the option to set.</div>
 293 </li>
 294 <li>
 295 <div><strong>value</strong></div>
 296 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 297 </div>
 298 <div>A value to set for the option.</div>
 299 </li>
 300 </ul>
 301 <div>
 302 <strong>Code examples:</strong><p>Invoke the  method:</p>
 303 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 304 </div>
 305 </div>
 306 <div class="api-item">
 307 <h3>option( options )</h3>
 308 <div>Sets one or more options for the spinner.</div>
 309 <ul><li>
 310 <div><strong>options</strong></div>
 311 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 312 </div>
 313 <div>A map of option-value pairs to set.</div>
 314 </li></ul>
 315 <div>
 316 <strong>Code examples:</strong><p>Invoke the  method:</p>
 317 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
 318 </div>
 319 </div>
 320 </div>
 321 <div id="method-pageDown"><div class="api-item">
 322 <h3>pageDown(  [pages ] )</h3>
 323 <div>
 324                                 Decrements the value by the specified number of pages, as defined by the <a href="#option-page"><code>page</code></a> option. Without the parameter, a single page is decremented.
 325                         </div>
 326 <ul><li>
 327 <div><strong>pages</strong></div>
 328 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
 329 </div>
 330 <div>Number of pages to decrement, defaults to 1.</div>
 331 </li></ul>
 332 <div>
 333 <strong>Code examples:</strong><p>Invoke the pageDown method:</p>
 334 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"pageDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 335 </div>
 336 </div></div>
 337 <div id="method-pageUp"><div class="api-item">
 338 <h3>pageUp(  [pages ] )</h3>
 339 <div>
 340                                 Increments the value by the specified number of pages, as defined by the <a href="#option-page"><code>page</code></a> option. Without the parameter, a single page is incremented.
 341                         </div>
 342 <ul><li>
 343 <div><strong>pages</strong></div>
 344 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
 345 </div>
 346 <div>Number of pages to increment, defaults to 1.</div>
 347 </li></ul>
 348 <div>
 349 <strong>Code examples:</strong><p>Invoke the pageUp method:</p>
 350 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"pageUp"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div>
 351 </div>
 352 </div></div>
 353 <div id="method-stepDown"><div class="api-item">
 354 <h3>stepDown(  [steps ] )</h3>
 355 <div>
 356                                 Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.
 357                                 <p>If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.</p>
 358                         </div>
 359 <ul><li>
 360 <div><strong>steps</strong></div>
 361 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
 362 </div>
 363 <div>Number of steps to decrement, defaults to 1.</div>
 364 </li></ul>
 365 <div>
 366 <strong>Code examples:</strong><p>Invoke the stepDown method:</p>
 367 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"stepDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 368 </div>
 369 </div></div>
 370 <div id="method-stepUp"><div class="api-item">
 371 <h3>stepUp(  [steps ] )</h3>
 372 <div>
 373                                 Increments the value by the specified number of steps. Without the parameter, a single step is incremented.
 374                                 <p>If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.</p>
 375                         </div>
 376 <ul><li>
 377 <div><strong>steps</strong></div>
 378 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
 379 </div>
 380 <div>Number of steps to increment, defaults to 1.</div>
 381 </li></ul>
 382 <div>
 383 <strong>Code examples:</strong><p>Invoke the stepUp method:</p>
 384 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"stepUp"</code><code class="plain">, 5 );</code></div></div></td></tr></tbody></table></div>
 385 </div>
 386 </div></div>
 387 <div id="method-value">
 388 <div class="api-item">
 389 <h3>value()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Number">Number</a></span>
 390 </h3>
 391 <div>Gets the current value as a number. The value is parsed based on the <a href="#option-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options.</div>
 392 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 393 <div>
 394 <strong>Code examples:</strong><p>Invoke the  method:</p>
 395 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">value = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"value"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 396 </div>
 397 </div>
 398 <div class="api-item">
 399 <h3>value( value )</h3>
 400 <div></div>
 401 <ul><li>
 402 <div><strong>value</strong></div>
 403 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a>
 404 </div>
 405 <div>The value to set. If passed as a string, the value is parsed based on the <a href="#option-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options.</div>
 406 </li></ul>
 407 <div>
 408 <strong>Code examples:</strong><p>Invoke the  method:</p>
 409 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"value"</code><code class="plain">, 50 );</code></div></div></td></tr></tbody></table></div>
 410 </div>
 411 </div>
 412 </div>
 413 <div id="method-widget"><div class="api-item">
 414 <h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
 415 </h3>
 416 <div>
 417                 Returns a <code>jQuery</code> object containing the generated wrapper.
 418         </div>
 419 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 420 <div>
 421 <strong>Code examples:</strong><p>Invoke the widget method:</p>
 422 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 423 </div>
 424 </div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-change" class="api-item first-item">
 425 <h3>change( event, ui )<span class="returns">Type: <code>spinchange</code></span>
 426 </h3>
 427 <div>
 428                                 Triggered when the value of the spinner has changed and the input is no longer focused.
 429                         </div>
 430 <ul>
 431 <li>
 432 <div><strong>event</strong></div>
 433 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 434 </div>
 435 <div></div>
 436 </li>
 437 <li>
 438 <div><strong>ui</strong></div>
 439 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 440 </div>
 441 <div></div>
 442 </li>
 443 </ul>
 444 <div>
 445 <strong>Code examples:</strong><p>Initialize the spinner with the change callback specified:</p>
 446 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">change: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 447 <p>Bind an event listener to the spinchange event:</p>
 448 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinchange"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 449 </div>
 450 </div>
 451 <div id="event-create" class="api-item">
 452 <h3>create( event, ui )<span class="returns">Type: <code>spincreate</code></span>
 453 </h3>
 454 <div>
 455                 Triggered when the spinner is created.
 456         </div>
 457 <ul>
 458 <li>
 459 <div><strong>event</strong></div>
 460 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 461 </div>
 462 <div></div>
 463 </li>
 464 <li>
 465 <div><strong>ui</strong></div>
 466 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 467 </div>
 468 <div></div>
 469 </li>
 470 </ul>
 471 <div>
 472 <strong>Code examples:</strong><p>Initialize the spinner with the create callback specified:</p>
 473 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 474 <p>Bind an event listener to the spincreate event:</p>
 475 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spincreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 476 </div>
 477 </div>
 478 <div id="event-spin" class="api-item">
 479 <h3>spin( event, ui )<span class="returns">Type: <code>spin</code></span>
 480 </h3>
 481 <div>
 482                                 Triggered during increment/decrement (to determine direction of spin compare current value with <code>ui.value</code>).
 483                                 <p>Can be canceled, preventing the value from being updated.</p>
 484                         </div>
 485 <ul>
 486 <li>
 487 <div><strong>event</strong></div>
 488 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 489 </div>
 490 <div></div>
 491 </li>
 492 <li>
 493 <div><strong>ui</strong></div>
 494 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 495 </div>
 496 <div></div>
 497 <ul><li>
 498 <div><strong>value</strong></div>
 499 <div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
 500 </div>
 501 <div>The new value to be set, unless the event is cancelled.</div>
 502 </li></ul>
 503 </li>
 504 </ul>
 505 <div>
 506 <strong>Code examples:</strong><p>Initialize the spinner with the spin callback specified:</p>
 507 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">spin: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 508 <p>Bind an event listener to the spin event:</p>
 509 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spin"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 510 </div>
 511 </div>
 512 <div id="event-start" class="api-item">
 513 <h3>start( event, ui )<span class="returns">Type: <code>spinstart</code></span>
 514 </h3>
 515 <div>
 516                                 Triggered before a spin. Can be canceled, preventing the spin from occurring.
 517                         </div>
 518 <ul>
 519 <li>
 520 <div><strong>event</strong></div>
 521 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 522 </div>
 523 <div></div>
 524 </li>
 525 <li>
 526 <div><strong>ui</strong></div>
 527 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 528 </div>
 529 <div></div>
 530 </li>
 531 </ul>
 532 <div>
 533 <strong>Code examples:</strong><p>Initialize the spinner with the start callback specified:</p>
 534 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">start: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 535 <p>Bind an event listener to the spinstart event:</p>
 536 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinstart"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 537 </div>
 538 </div>
 539 <div id="event-stop" class="api-item">
 540 <h3>stop( event, ui )<span class="returns">Type: <code>spinstop</code></span>
 541 </h3>
 542 <div>Triggered after a spin.</div>
 543 <ul>
 544 <li>
 545 <div><strong>event</strong></div>
 546 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 547 </div>
 548 <div></div>
 549 </li>
 550 <li>
 551 <div><strong>ui</strong></div>
 552 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 553 </div>
 554 <div></div>
 555 </li>
 556 </ul>
 557 <div>
 558 <strong>Code examples:</strong><p>Initialize the spinner with the stop callback specified:</p>
 559 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">stop: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 560 <p>Bind an event listener to the spinstop event:</p>
 561 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinstop"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 562 </div>
 563 </div></section><section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
 564 <h4><span class="desc">Plain number spinner</span></h4>
 565 <div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;spinner demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="plain">&lt;</code><code class="keyword">input</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"spinner"</code><code class="plain">&gt;</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="plain">$( "#spinner" ).spinner();</code></div><div class="line number16 index15 alt1"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number17 index16 alt2">&nbsp;</div><div class="line number18 index17 alt1"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number19 index18 alt2"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
 566 <h4>Demo:</h4>
 567 <div class="demo code-demo" data-height="50"></div>
 568 </div></section>
 569 </div></article>
 570
 571 </body>
 572 </html>