source: ether_iasi/trunk/web/resources/js/library/jquery-ui-1.9.2.custom/development-bundle/docs/spinner.html @ 786

Last change on this file since 786 was 786, checked in by cbipsl, 10 years ago

commit temp
bug libraries
File size: 54.1 KB
Line 
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-change">change</a></div>
64<div><a href="#event-create">create</a></div>
65<div><a href="#event-spin">spin</a></div>
66<div><a href="#event-start">start</a></div>
67<div><a href="#event-stop">stop</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
84                <h3>Dependencies</h3>
85                <ul>
86                        <li><a href="/category/ui-core/">UI Core</a></li>
87                        <li><a href="/jQuery.widget/">Widget Factory</a></li>
88                        <li><a href="/button/">Button</a></li>
89                        <li>
90<a href="https://github.com/jquery/globalize">Globalize</a> (external, optional; for use with the <a href="#option-culture"><code>culture</code></a> and <a href="#option-numberFormat"><code>numberFormat</code></a> options)</li>
91                </ul>
92        </div>
93<h3>Additional Notes:</h3>
94<div class="longdesc"><ul><li>
95                        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.
96                </li></ul></div>
97<section id="options"><header><h2>Options</h2></header><div id="option-culture" class="api-item first-item">
98<h3>culture<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
99</h3>
100<div class="default">
101<strong>Default: </strong><code>null</code>
102</div>
103<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>
104<strong>Code examples:</strong><p>Initialize the spinner with the <code>culture</code> option specified:</p>
105<div class="syntaxhighlighter javascript nogutter">
106        <table>
107                <tbody>
108                        <tr>
109                                <td class="gutter">
110                                       
111                                                <div class="line n1">1</div>
112                                       
113                                </td>
114                                <td class="code">
115                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ culture: <span class="string">"fr"</span> });</code></div></div></pre>
116                                </td>
117                        </tr>
118                </tbody>
119        </table>
120</div>
121
122<p>Get or set the <code>culture</code> option, after initialization:</p>
123<div class="syntaxhighlighter javascript nogutter">
124        <table>
125                <tbody>
126                        <tr>
127                                <td class="gutter">
128                                       
129                                                <div class="line n1">1</div>
130                                       
131                                                <div class="line n2">2</div>
132                                       
133                                                <div class="line n3">3</div>
134                                       
135                                                <div class="line n4">4</div>
136                                       
137                                                <div class="line n5">5</div>
138                                       
139                                </td>
140                                <td class="code">
141                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> culture = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"culture"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"culture"</span>, <span class="string">"fr"</span> );</code></div></div></pre>
142                                </td>
143                        </tr>
144                </tbody>
145        </table>
146</div>
147
148</div>
149<div id="option-disabled" class="api-item">
150<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
151</h3>
152<div class="default">
153<strong>Default: </strong><code>false</code>
154</div>
155<div>Disables the spinner if set to <code>true</code>.</div>
156<strong>Code examples:</strong><p>Initialize the spinner with the <code>disabled</code> option specified:</p>
157<div class="syntaxhighlighter javascript nogutter">
158        <table>
159                <tbody>
160                        <tr>
161                                <td class="gutter">
162                                       
163                                                <div class="line n1">1</div>
164                                       
165                                </td>
166                                <td class="code">
167                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ disabled: <span class="literal">true</span> });</code></div></div></pre>
168                                </td>
169                        </tr>
170                </tbody>
171        </table>
172</div>
173
174<p>Get or set the <code>disabled</code> option, after initialization:</p>
175<div class="syntaxhighlighter javascript nogutter">
176        <table>
177                <tbody>
178                        <tr>
179                                <td class="gutter">
180                                       
181                                                <div class="line n1">1</div>
182                                       
183                                                <div class="line n2">2</div>
184                                       
185                                                <div class="line n3">3</div>
186                                       
187                                                <div class="line n4">4</div>
188                                       
189                                                <div class="line n5">5</div>
190                                       
191                                </td>
192                                <td class="code">
193                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
194                                </td>
195                        </tr>
196                </tbody>
197        </table>
198</div>
199
200</div>
201<div id="option-icons" class="api-item">
202<h3>icons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a></span>
203</h3>
204<div class="default">
205<strong>Default: </strong><code>{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }</code>
206</div>
207<div>
208                                Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
209                                <ul>
210                                        <li>up (string, default: "ui-icon-triangle-1-n")</li>
211                                        <li>down (string, default: "ui-icon-triangle-1-s")</li>
212                                </ul>
213                        </div>
214<strong>Code examples:</strong><p>Initialize the spinner with the <code>icons</code> option specified:</p>
215<div class="syntaxhighlighter javascript nogutter">
216        <table>
217                <tbody>
218                        <tr>
219                                <td class="gutter">
220                                       
221                                                <div class="line n1">1</div>
222                                       
223                                </td>
224                                <td class="code">
225                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ icons: { down: <span class="string">"custom-down-icon"</span>, up: <span class="string">"custom-up-icon"</span> } });</code></div></div></pre>
226                                </td>
227                        </tr>
228                </tbody>
229        </table>
230</div>
231
232<p>Get or set the <code>icons</code> option, after initialization:</p>
233<div class="syntaxhighlighter javascript nogutter">
234        <table>
235                <tbody>
236                        <tr>
237                                <td class="gutter">
238                                       
239                                                <div class="line n1">1</div>
240                                       
241                                                <div class="line n2">2</div>
242                                       
243                                                <div class="line n3">3</div>
244                                       
245                                                <div class="line n4">4</div>
246                                       
247                                                <div class="line n5">5</div>
248                                       
249                                </td>
250                                <td class="code">
251                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> icons = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"icons"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"icons"</span>, { down: <span class="string">"custom-down-icon"</span>, up: <span class="string">"custom-up-icon"</span> } );</code></div></div></pre>
252                                </td>
253                        </tr>
254                </tbody>
255        </table>
256</div>
257
258</div>
259<div id="option-incremental" class="api-item">
260<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>( <a href="http://api.jquery.com/Types/#Integer">Integer</a> count )</span>
261</h3>
262<div class="default">
263<strong>Default: </strong><code>true</code>
264</div>
265<div>Controls the number of steps taken when holding down a spin button.</div>
266<strong>Multiple types supported:</strong><ul>
267<li>
268<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>
269<li>
270<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>
271</ul>
272<strong>Code examples:</strong><p>Initialize the spinner with the <code>incremental</code> option specified:</p>
273<div class="syntaxhighlighter javascript nogutter">
274        <table>
275                <tbody>
276                        <tr>
277                                <td class="gutter">
278                                       
279                                                <div class="line n1">1</div>
280                                       
281                                </td>
282                                <td class="code">
283                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ incremental: <span class="literal">false</span> });</code></div></div></pre>
284                                </td>
285                        </tr>
286                </tbody>
287        </table>
288</div>
289
290<p>Get or set the <code>incremental</code> option, after initialization:</p>
291<div class="syntaxhighlighter javascript nogutter">
292        <table>
293                <tbody>
294                        <tr>
295                                <td class="gutter">
296                                       
297                                                <div class="line n1">1</div>
298                                       
299                                                <div class="line n2">2</div>
300                                       
301                                                <div class="line n3">3</div>
302                                       
303                                                <div class="line n4">4</div>
304                                       
305                                                <div class="line n5">5</div>
306                                       
307                                </td>
308                                <td class="code">
309                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> incremental = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"incremental"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"incremental"</span>, <span class="literal">false</span> );</code></div></div></pre>
310                                </td>
311                        </tr>
312                </tbody>
313        </table>
314</div>
315
316</div>
317<div id="option-max" class="api-item">
318<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>
319</h3>
320<div class="default">
321<strong>Default: </strong><code>null</code>
322</div>
323<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>
324<strong>Multiple types supported:</strong><ul>
325<li>
326<strong>Number</strong>: The maximum value.</li>
327<li>
328<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>
329</ul>
330<strong>Code examples:</strong><p>Initialize the spinner with the <code>max</code> option specified:</p>
331<div class="syntaxhighlighter javascript nogutter">
332        <table>
333                <tbody>
334                        <tr>
335                                <td class="gutter">
336                                       
337                                                <div class="line n1">1</div>
338                                       
339                                </td>
340                                <td class="code">
341                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ max: <span class="number">50</span> });</code></div></div></pre>
342                                </td>
343                        </tr>
344                </tbody>
345        </table>
346</div>
347
348<p>Get or set the <code>max</code> option, after initialization:</p>
349<div class="syntaxhighlighter javascript nogutter">
350        <table>
351                <tbody>
352                        <tr>
353                                <td class="gutter">
354                                       
355                                                <div class="line n1">1</div>
356                                       
357                                                <div class="line n2">2</div>
358                                       
359                                                <div class="line n3">3</div>
360                                       
361                                                <div class="line n4">4</div>
362                                       
363                                                <div class="line n5">5</div>
364                                       
365                                </td>
366                                <td class="code">
367                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> max = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"max"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"max"</span>, <span class="number">50</span> );</code></div></div></pre>
368                                </td>
369                        </tr>
370                </tbody>
371        </table>
372</div>
373
374</div>
375<div id="option-min" class="api-item">
376<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>
377</h3>
378<div class="default">
379<strong>Default: </strong><code>null</code>
380</div>
381<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>
382<strong>Multiple types supported:</strong><ul>
383<li>
384<strong>Number</strong>: The minimum value.</li>
385<li>
386<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>
387</ul>
388<strong>Code examples:</strong><p>Initialize the spinner with the <code>min</code> option specified:</p>
389<div class="syntaxhighlighter javascript nogutter">
390        <table>
391                <tbody>
392                        <tr>
393                                <td class="gutter">
394                                       
395                                                <div class="line n1">1</div>
396                                       
397                                </td>
398                                <td class="code">
399                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ min: <span class="number">0</span> });</code></div></div></pre>
400                                </td>
401                        </tr>
402                </tbody>
403        </table>
404</div>
405
406<p>Get or set the <code>min</code> option, after initialization:</p>
407<div class="syntaxhighlighter javascript nogutter">
408        <table>
409                <tbody>
410                        <tr>
411                                <td class="gutter">
412                                       
413                                                <div class="line n1">1</div>
414                                       
415                                                <div class="line n2">2</div>
416                                       
417                                                <div class="line n3">3</div>
418                                       
419                                                <div class="line n4">4</div>
420                                       
421                                                <div class="line n5">5</div>
422                                       
423                                </td>
424                                <td class="code">
425                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> min = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"min"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"min"</span>, <span class="number">0</span> );</code></div></div></pre>
426                                </td>
427                        </tr>
428                </tbody>
429        </table>
430</div>
431
432</div>
433<div id="option-numberFormat" class="api-item">
434<h3>numberFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
435</h3>
436<div class="default">
437<strong>Default: </strong><code>null</code>
438</div>
439<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>
440<strong>Code examples:</strong><p>Initialize the spinner with the <code>numberFormat</code> option specified:</p>
441<div class="syntaxhighlighter javascript nogutter">
442        <table>
443                <tbody>
444                        <tr>
445                                <td class="gutter">
446                                       
447                                                <div class="line n1">1</div>
448                                       
449                                </td>
450                                <td class="code">
451                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ numberFormat: <span class="string">"n"</span> });</code></div></div></pre>
452                                </td>
453                        </tr>
454                </tbody>
455        </table>
456</div>
457
458<p>Get or set the <code>numberFormat</code> option, after initialization:</p>
459<div class="syntaxhighlighter javascript nogutter">
460        <table>
461                <tbody>
462                        <tr>
463                                <td class="gutter">
464                                       
465                                                <div class="line n1">1</div>
466                                       
467                                                <div class="line n2">2</div>
468                                       
469                                                <div class="line n3">3</div>
470                                       
471                                                <div class="line n4">4</div>
472                                       
473                                                <div class="line n5">5</div>
474                                       
475                                </td>
476                                <td class="code">
477                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> numberFormat = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"numberFormat"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"numberFormat"</span>, <span class="string">"n"</span> );</code></div></div></pre>
478                                </td>
479                        </tr>
480                </tbody>
481        </table>
482</div>
483
484</div>
485<div id="option-page" class="api-item">
486<h3>page<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
487</h3>
488<div class="default">
489<strong>Default: </strong><code>10</code>
490</div>
491<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>
492<strong>Code examples:</strong><p>Initialize the spinner with the <code>page</code> option specified:</p>
493<div class="syntaxhighlighter javascript nogutter">
494        <table>
495                <tbody>
496                        <tr>
497                                <td class="gutter">
498                                       
499                                                <div class="line n1">1</div>
500                                       
501                                </td>
502                                <td class="code">
503                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ page: <span class="number">5</span> });</code></div></div></pre>
504                                </td>
505                        </tr>
506                </tbody>
507        </table>
508</div>
509
510<p>Get or set the <code>page</code> option, after initialization:</p>
511<div class="syntaxhighlighter javascript nogutter">
512        <table>
513                <tbody>
514                        <tr>
515                                <td class="gutter">
516                                       
517                                                <div class="line n1">1</div>
518                                       
519                                                <div class="line n2">2</div>
520                                       
521                                                <div class="line n3">3</div>
522                                       
523                                                <div class="line n4">4</div>
524                                       
525                                                <div class="line n5">5</div>
526                                       
527                                </td>
528                                <td class="code">
529                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> page = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"page"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"page"</span>, <span class="number">5</span> );</code></div></div></pre>
530                                </td>
531                        </tr>
532                </tbody>
533        </table>
534</div>
535
536</div>
537<div id="option-step" class="api-item">
538<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>
539</h3>
540<div class="default">
541<strong>Default: </strong><code>1</code>
542</div>
543<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>
544<strong>Multiple types supported:</strong><ul>
545<li>
546<strong>Number</strong>: The size of the step.</li>
547<li>
548<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>
549</ul>
550<strong>Code examples:</strong><p>Initialize the spinner with the <code>step</code> option specified:</p>
551<div class="syntaxhighlighter javascript nogutter">
552        <table>
553                <tbody>
554                        <tr>
555                                <td class="gutter">
556                                       
557                                                <div class="line n1">1</div>
558                                       
559                                </td>
560                                <td class="code">
561                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({ step: <span class="number">2</span> });</code></div></div></pre>
562                                </td>
563                        </tr>
564                </tbody>
565        </table>
566</div>
567
568<p>Get or set the <code>step</code> option, after initialization:</p>
569<div class="syntaxhighlighter javascript nogutter">
570        <table>
571                <tbody>
572                        <tr>
573                                <td class="gutter">
574                                       
575                                                <div class="line n1">1</div>
576                                       
577                                                <div class="line n2">2</div>
578                                       
579                                                <div class="line n3">3</div>
580                                       
581                                                <div class="line n4">4</div>
582                                       
583                                                <div class="line n5">5</div>
584                                       
585                                </td>
586                                <td class="code">
587                                        <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> step = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"step"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"step"</span>, <span class="number">2</span> );</code></div></div></pre>
588                                </td>
589                        </tr>
590                </tbody>
591        </table>
592</div>
593
594</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
595<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
596</h3>
597<div>
598                Removes the spinner functionality completely. This will return the element back to its pre-init state.
599        </div>
600<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
601<div>
602<strong>Code examples:</strong><p>Invoke the destroy method:</p>
603<div class="syntaxhighlighter javascript nogutter">
604        <table>
605                <tbody>
606                        <tr>
607                                <td class="gutter">
608                                       
609                                                <div class="line n1">1</div>
610                                       
611                                </td>
612                                <td class="code">
613                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"destroy"</span> );</code></div></div></pre>
614                                </td>
615                        </tr>
616                </tbody>
617        </table>
618</div>
619
620</div>
621</div></div>
622<div id="method-disable"><div class="api-item">
623<h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
624</h3>
625<div>
626                Disables the spinner.
627        </div>
628<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
629<div>
630<strong>Code examples:</strong><p>Invoke the disable method:</p>
631<div class="syntaxhighlighter javascript nogutter">
632        <table>
633                <tbody>
634                        <tr>
635                                <td class="gutter">
636                                       
637                                                <div class="line n1">1</div>
638                                       
639                                </td>
640                                <td class="code">
641                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"disable"</span> );</code></div></div></pre>
642                                </td>
643                        </tr>
644                </tbody>
645        </table>
646</div>
647
648</div>
649</div></div>
650<div id="method-enable"><div class="api-item">
651<h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
652</h3>
653<div>
654                Enables the spinner.
655        </div>
656<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
657<div>
658<strong>Code examples:</strong><p>Invoke the enable method:</p>
659<div class="syntaxhighlighter javascript nogutter">
660        <table>
661                <tbody>
662                        <tr>
663                                <td class="gutter">
664                                       
665                                                <div class="line n1">1</div>
666                                       
667                                </td>
668                                <td class="code">
669                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"enable"</span> );</code></div></div></pre>
670                                </td>
671                        </tr>
672                </tbody>
673        </table>
674</div>
675
676</div>
677</div></div>
678<div id="method-option">
679<div class="api-item">
680<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
681</h3>
682<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
683<ul><li>
684<div><strong>optionName</strong></div>
685<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
686</div>
687<div>The name of the option to get.</div>
688</li></ul>
689<div>
690<strong>Code examples:</strong><p>Invoke the  method:</p>
691<div class="syntaxhighlighter javascript nogutter">
692        <table>
693                <tbody>
694                        <tr>
695                                <td class="gutter">
696                                       
697                                                <div class="line n1">1</div>
698                                       
699                                </td>
700                                <td class="code">
701                                        <pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre>
702                                </td>
703                        </tr>
704                </tbody>
705        </table>
706</div>
707
708</div>
709</div>
710<div class="api-item">
711<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
712</h3>
713<div>Gets an object containing key/value pairs representing the current spinner options hash.</div>
714<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
715<div>
716<strong>Code examples:</strong><p>Invoke the  method:</p>
717<div class="syntaxhighlighter javascript nogutter">
718        <table>
719                <tbody>
720                        <tr>
721                                <td class="gutter">
722                                       
723                                                <div class="line n1">1</div>
724                                       
725                                </td>
726                                <td class="code">
727                                        <pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span> );</code></div></div></pre>
728                                </td>
729                        </tr>
730                </tbody>
731        </table>
732</div>
733
734</div>
735</div>
736<div class="api-item">
737<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
738</h3>
739<div>Sets the value of the spinner option associated with the specified <code>optionName</code>.</div>
740<ul>
741<li>
742<div><strong>optionName</strong></div>
743<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
744</div>
745<div>The name of the option to set.</div>
746</li>
747<li>
748<div><strong>value</strong></div>
749<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
750</div>
751<div>A value to set for the option.</div>
752</li>
753</ul>
754<div>
755<strong>Code examples:</strong><p>Invoke the  method:</p>
756<div class="syntaxhighlighter javascript nogutter">
757        <table>
758                <tbody>
759                        <tr>
760                                <td class="gutter">
761                                       
762                                                <div class="line n1">1</div>
763                                       
764                                </td>
765                                <td class="code">
766                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
767                                </td>
768                        </tr>
769                </tbody>
770        </table>
771</div>
772
773</div>
774</div>
775<div class="api-item">
776<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
777</h3>
778<div>Sets one or more options for the spinner.</div>
779<ul><li>
780<div><strong>options</strong></div>
781<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
782</div>
783<div>A map of option-value pairs to set.</div>
784</li></ul>
785<div>
786<strong>Code examples:</strong><p>Invoke the  method:</p>
787<div class="syntaxhighlighter javascript nogutter">
788        <table>
789                <tbody>
790                        <tr>
791                                <td class="gutter">
792                                       
793                                                <div class="line n1">1</div>
794                                       
795                                </td>
796                                <td class="code">
797                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
798                                </td>
799                        </tr>
800                </tbody>
801        </table>
802</div>
803
804</div>
805</div>
806</div>
807<div id="method-pageDown"><div class="api-item">
808<h3>pageDown(  [pages ] )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
809</h3>
810<div>
811                                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.
812                        </div>
813<ul><li>
814<div><strong>pages</strong></div>
815<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a>
816</div>
817<div>Number of pages to decrement, defaults to 1.</div>
818</li></ul>
819<div>
820<strong>Code examples:</strong><p>Invoke the pageDown method:</p>
821<div class="syntaxhighlighter javascript nogutter">
822        <table>
823                <tbody>
824                        <tr>
825                                <td class="gutter">
826                                       
827                                                <div class="line n1">1</div>
828                                       
829                                </td>
830                                <td class="code">
831                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"pageDown"</span> );</code></div></div></pre>
832                                </td>
833                        </tr>
834                </tbody>
835        </table>
836</div>
837
838</div>
839</div></div>
840<div id="method-pageUp"><div class="api-item">
841<h3>pageUp(  [pages ] )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
842</h3>
843<div>
844                                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.
845                        </div>
846<ul><li>
847<div><strong>pages</strong></div>
848<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a>
849</div>
850<div>Number of pages to increment, defaults to 1.</div>
851</li></ul>
852<div>
853<strong>Code examples:</strong><p>Invoke the pageUp method:</p>
854<div class="syntaxhighlighter javascript nogutter">
855        <table>
856                <tbody>
857                        <tr>
858                                <td class="gutter">
859                                       
860                                                <div class="line n1">1</div>
861                                       
862                                </td>
863                                <td class="code">
864                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"pageUp"</span>, <span class="number">10</span> );</code></div></div></pre>
865                                </td>
866                        </tr>
867                </tbody>
868        </table>
869</div>
870
871</div>
872</div></div>
873<div id="method-stepDown"><div class="api-item">
874<h3>stepDown(  [steps ] )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
875</h3>
876<div>
877                                Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.
878                                <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>
879                        </div>
880<ul><li>
881<div><strong>steps</strong></div>
882<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a>
883</div>
884<div>Number of steps to decrement, defaults to 1.</div>
885</li></ul>
886<div>
887<strong>Code examples:</strong><p>Invoke the stepDown method:</p>
888<div class="syntaxhighlighter javascript nogutter">
889        <table>
890                <tbody>
891                        <tr>
892                                <td class="gutter">
893                                       
894                                                <div class="line n1">1</div>
895                                       
896                                </td>
897                                <td class="code">
898                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"stepDown"</span> );</code></div></div></pre>
899                                </td>
900                        </tr>
901                </tbody>
902        </table>
903</div>
904
905</div>
906</div></div>
907<div id="method-stepUp"><div class="api-item">
908<h3>stepUp(  [steps ] )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
909</h3>
910<div>
911                                Increments the value by the specified number of steps. Without the parameter, a single step is incremented.
912                                <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>
913                        </div>
914<ul><li>
915<div><strong>steps</strong></div>
916<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a>
917</div>
918<div>Number of steps to increment, defaults to 1.</div>
919</li></ul>
920<div>
921<strong>Code examples:</strong><p>Invoke the stepUp method:</p>
922<div class="syntaxhighlighter javascript nogutter">
923        <table>
924                <tbody>
925                        <tr>
926                                <td class="gutter">
927                                       
928                                                <div class="line n1">1</div>
929                                       
930                                </td>
931                                <td class="code">
932                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"stepUp"</span>, <span class="number">5</span> );</code></div></div></pre>
933                                </td>
934                        </tr>
935                </tbody>
936        </table>
937</div>
938
939</div>
940</div></div>
941<div id="method-value">
942<div class="api-item">
943<h3>value()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Number">Number</a></span>
944</h3>
945<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>
946<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
947<div>
948<strong>Code examples:</strong><p>Invoke the  method:</p>
949<div class="syntaxhighlighter javascript nogutter">
950        <table>
951                <tbody>
952                        <tr>
953                                <td class="gutter">
954                                       
955                                                <div class="line n1">1</div>
956                                       
957                                </td>
958                                <td class="code">
959                                        <pre><div class="container"><div class="line"><code><span class="keyword">var</span> value = $( <span class="string">".selector"</span> ).spinner( <span class="string">"value"</span> );</code></div></div></pre>
960                                </td>
961                        </tr>
962                </tbody>
963        </table>
964</div>
965
966</div>
967</div>
968<div class="api-item">
969<h3>value( value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
970</h3>
971<div></div>
972<ul><li>
973<div><strong>value</strong></div>
974<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a>
975</div>
976<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>
977</li></ul>
978<div>
979<strong>Code examples:</strong><p>Invoke the  method:</p>
980<div class="syntaxhighlighter javascript nogutter">
981        <table>
982                <tbody>
983                        <tr>
984                                <td class="gutter">
985                                       
986                                                <div class="line n1">1</div>
987                                       
988                                </td>
989                                <td class="code">
990                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner( <span class="string">"value"</span>, <span class="number">50</span> );</code></div></div></pre>
991                                </td>
992                        </tr>
993                </tbody>
994        </table>
995</div>
996
997</div>
998</div>
999</div>
1000<div id="method-widget"><div class="api-item">
1001<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
1002</h3>
1003<div>
1004                Returns a <code>jQuery</code> object containing the generated wrapper.
1005        </div>
1006<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
1007<div>
1008<strong>Code examples:</strong><p>Invoke the widget method:</p>
1009<div class="syntaxhighlighter javascript nogutter">
1010        <table>
1011                <tbody>
1012                        <tr>
1013                                <td class="gutter">
1014                                       
1015                                                <div class="line n1">1</div>
1016                                       
1017                                </td>
1018                                <td class="code">
1019                                        <pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).spinner( <span class="string">"widget"</span> );</code></div></div></pre>
1020                                </td>
1021                        </tr>
1022                </tbody>
1023        </table>
1024</div>
1025
1026</div>
1027</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-change" class="api-item first-item">
1028<h3>change( event, ui )<span class="returns">Type: <code>spinchange</code></span>
1029</h3>
1030<div>
1031                                Triggered when the value of the spinner has changed and the input is no longer focused.
1032                        </div>
1033<ul>
1034<li>
1035<div><strong>event</strong></div>
1036<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1037</div>
1038<div></div>
1039</li>
1040<li>
1041<div><strong>ui</strong></div>
1042<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1043</div>
1044<div></div>
1045</li>
1046</ul>
1047<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
1048<div>
1049<strong>Code examples:</strong><p>Initialize the spinner with the change callback specified:</p>
1050<div class="syntaxhighlighter javascript nogutter">
1051        <table>
1052                <tbody>
1053                        <tr>
1054                                <td class="gutter">
1055                                       
1056                                                <div class="line n1">1</div>
1057                                       
1058                                                <div class="line n2">2</div>
1059                                       
1060                                                <div class="line n3">3</div>
1061                                       
1062                                </td>
1063                                <td class="code">
1064                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({</code></div></div><div class="container"><div class="line"><code>  change: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1065                                </td>
1066                        </tr>
1067                </tbody>
1068        </table>
1069</div>
1070
1071<p>Bind an event listener to the spinchange event:</p>
1072<div class="syntaxhighlighter javascript nogutter">
1073        <table>
1074                <tbody>
1075                        <tr>
1076                                <td class="gutter">
1077                                       
1078                                                <div class="line n1">1</div>
1079                                       
1080                                </td>
1081                                <td class="code">
1082                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"spinchange"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1083                                </td>
1084                        </tr>
1085                </tbody>
1086        </table>
1087</div>
1088
1089</div>
1090</div>
1091<div id="event-create" class="api-item">
1092<h3>create( event, ui )<span class="returns">Type: <code>spincreate</code></span>
1093</h3>
1094<div>
1095                Triggered when the spinner is created.
1096        </div>
1097<ul>
1098<li>
1099<div><strong>event</strong></div>
1100<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1101</div>
1102<div></div>
1103</li>
1104<li>
1105<div><strong>ui</strong></div>
1106<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1107</div>
1108<div></div>
1109</li>
1110</ul>
1111<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
1112<div>
1113<strong>Code examples:</strong><p>Initialize the spinner with the create callback specified:</p>
1114<div class="syntaxhighlighter javascript nogutter">
1115        <table>
1116                <tbody>
1117                        <tr>
1118                                <td class="gutter">
1119                                       
1120                                                <div class="line n1">1</div>
1121                                       
1122                                                <div class="line n2">2</div>
1123                                       
1124                                                <div class="line n3">3</div>
1125                                       
1126                                </td>
1127                                <td class="code">
1128                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({</code></div></div><div class="container"><div class="line"><code>  create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1129                                </td>
1130                        </tr>
1131                </tbody>
1132        </table>
1133</div>
1134
1135<p>Bind an event listener to the spincreate event:</p>
1136<div class="syntaxhighlighter javascript nogutter">
1137        <table>
1138                <tbody>
1139                        <tr>
1140                                <td class="gutter">
1141                                       
1142                                                <div class="line n1">1</div>
1143                                       
1144                                </td>
1145                                <td class="code">
1146                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"spincreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1147                                </td>
1148                        </tr>
1149                </tbody>
1150        </table>
1151</div>
1152
1153</div>
1154</div>
1155<div id="event-spin" class="api-item">
1156<h3>spin( event, ui )<span class="returns">Type: <code>spin</code></span>
1157</h3>
1158<div>
1159                                Triggered during increment/decrement (to determine direction of spin compare current value with <code>ui.value</code>).
1160                                <p>Can be canceled, preventing the value from being updated.</p>
1161                        </div>
1162<ul>
1163<li>
1164<div><strong>event</strong></div>
1165<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1166</div>
1167<div></div>
1168</li>
1169<li>
1170<div><strong>ui</strong></div>
1171<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1172</div>
1173<div></div>
1174<ul><li>
1175<div><strong>value</strong></div>
1176<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a>
1177</div>
1178<div>The new value to be set, unless the event is cancelled.</div>
1179</li></ul>
1180</li>
1181</ul>
1182<div>
1183<strong>Code examples:</strong><p>Initialize the spinner with the spin callback specified:</p>
1184<div class="syntaxhighlighter javascript nogutter">
1185        <table>
1186                <tbody>
1187                        <tr>
1188                                <td class="gutter">
1189                                       
1190                                                <div class="line n1">1</div>
1191                                       
1192                                                <div class="line n2">2</div>
1193                                       
1194                                                <div class="line n3">3</div>
1195                                       
1196                                </td>
1197                                <td class="code">
1198                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({</code></div></div><div class="container"><div class="line"><code>  spin: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1199                                </td>
1200                        </tr>
1201                </tbody>
1202        </table>
1203</div>
1204
1205<p>Bind an event listener to the spin event:</p>
1206<div class="syntaxhighlighter javascript nogutter">
1207        <table>
1208                <tbody>
1209                        <tr>
1210                                <td class="gutter">
1211                                       
1212                                                <div class="line n1">1</div>
1213                                       
1214                                </td>
1215                                <td class="code">
1216                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"spin"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1217                                </td>
1218                        </tr>
1219                </tbody>
1220        </table>
1221</div>
1222
1223</div>
1224</div>
1225<div id="event-start" class="api-item">
1226<h3>start( event, ui )<span class="returns">Type: <code>spinstart</code></span>
1227</h3>
1228<div>
1229                                Triggered before a spin. Can be canceled, preventing the spin from occurring.
1230                        </div>
1231<ul>
1232<li>
1233<div><strong>event</strong></div>
1234<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1235</div>
1236<div></div>
1237</li>
1238<li>
1239<div><strong>ui</strong></div>
1240<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1241</div>
1242<div></div>
1243</li>
1244</ul>
1245<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
1246<div>
1247<strong>Code examples:</strong><p>Initialize the spinner with the start callback specified:</p>
1248<div class="syntaxhighlighter javascript nogutter">
1249        <table>
1250                <tbody>
1251                        <tr>
1252                                <td class="gutter">
1253                                       
1254                                                <div class="line n1">1</div>
1255                                       
1256                                                <div class="line n2">2</div>
1257                                       
1258                                                <div class="line n3">3</div>
1259                                       
1260                                </td>
1261                                <td class="code">
1262                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({</code></div></div><div class="container"><div class="line"><code>  start: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1263                                </td>
1264                        </tr>
1265                </tbody>
1266        </table>
1267</div>
1268
1269<p>Bind an event listener to the spinstart event:</p>
1270<div class="syntaxhighlighter javascript nogutter">
1271        <table>
1272                <tbody>
1273                        <tr>
1274                                <td class="gutter">
1275                                       
1276                                                <div class="line n1">1</div>
1277                                       
1278                                </td>
1279                                <td class="code">
1280                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"spinstart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1281                                </td>
1282                        </tr>
1283                </tbody>
1284        </table>
1285</div>
1286
1287</div>
1288</div>
1289<div id="event-stop" class="api-item">
1290<h3>stop( event, ui )<span class="returns">Type: <code>spinstop</code></span>
1291</h3>
1292<div>Triggered after a spin.</div>
1293<ul>
1294<li>
1295<div><strong>event</strong></div>
1296<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1297</div>
1298<div></div>
1299</li>
1300<li>
1301<div><strong>ui</strong></div>
1302<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1303</div>
1304<div></div>
1305</li>
1306</ul>
1307<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
1308<div>
1309<strong>Code examples:</strong><p>Initialize the spinner with the stop callback specified:</p>
1310<div class="syntaxhighlighter javascript nogutter">
1311        <table>
1312                <tbody>
1313                        <tr>
1314                                <td class="gutter">
1315                                       
1316                                                <div class="line n1">1</div>
1317                                       
1318                                                <div class="line n2">2</div>
1319                                       
1320                                                <div class="line n3">3</div>
1321                                       
1322                                </td>
1323                                <td class="code">
1324                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).spinner({</code></div></div><div class="container"><div class="line"><code>  stop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1325                                </td>
1326                        </tr>
1327                </tbody>
1328        </table>
1329</div>
1330
1331<p>Bind an event listener to the spinstop event:</p>
1332<div class="syntaxhighlighter javascript nogutter">
1333        <table>
1334                <tbody>
1335                        <tr>
1336                                <td class="gutter">
1337                                       
1338                                                <div class="line n1">1</div>
1339                                       
1340                                </td>
1341                                <td class="code">
1342                                        <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"spinstop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1343                                </td>
1344                        </tr>
1345                </tbody>
1346        </table>
1347</div>
1348
1349</div>
1350</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
1351<h4><span class="desc">Plain number spinner</span></h4>
1352<div class="syntaxhighlighter xml ">
1353        <table>
1354                <tbody>
1355                        <tr>
1356                                <td class="gutter">
1357                                       
1358                                                <div class="line n1">1</div>
1359                                       
1360                                                <div class="line n2">2</div>
1361                                       
1362                                                <div class="line n3">3</div>
1363                                       
1364                                                <div class="line n4">4</div>
1365                                       
1366                                                <div class="line n5">5</div>
1367                                       
1368                                                <div class="line n6">6</div>
1369                                       
1370                                                <div class="line n7">7</div>
1371                                       
1372                                                <div class="line n8">8</div>
1373                                       
1374                                                <div class="line n9">9</div>
1375                                       
1376                                                <div class="line n10">10</div>
1377                                       
1378                                                <div class="line n11">11</div>
1379                                       
1380                                                <div class="line n12">12</div>
1381                                       
1382                                                <div class="line n13">13</div>
1383                                       
1384                                                <div class="line n14">14</div>
1385                                       
1386                                                <div class="line n15">15</div>
1387                                       
1388                                                <div class="line n16">16</div>
1389                                       
1390                                                <div class="line n17">17</div>
1391                                       
1392                                                <div class="line n18">18</div>
1393                                       
1394                                                <div class="line n19">19</div>
1395                                       
1396                                </td>
1397                                <td class="code">
1398                                        <pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">title</span>&gt;</span>spinner demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">input</span> <span class="attribute">id</span>=<span class="value">"spinner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#spinner"</span> ).spinner();</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
1399                                </td>
1400                        </tr>
1401                </tbody>
1402        </table>
1403</div>
1404
1405<h4>Demo:</h4>
1406<div class="demo code-demo" data-height="50"></div>
1407</div></section>
1408</div></article>
1409
1410</body>
1411</html>
Note: See TracBrowser for help on using the repository browser.