Spinner
Extend from $.fn.textbox.defaults. Override defaults with $.fn.spinner.defaults.
The spinner combines a editable text box and two small buttons that let the user choose from a range of values. Similar to the combobox, the spinner allows the user to type in a value but do not has a drop-down list. The spinner is the base component to create other spinner component such as numberspinner, timespinner, etc.
Dependencies
- textbox
Usage Example
The spinner should be created using javascript. Creating from markup is not allowed.
Properties
The properties extend from textbox, below is the added properties for spinner.
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | The width of this component. | auto |
| height | number | The height of this component. Available since version 1.3.2. | 22 |
| value | string | The initialize value. | |
| min | string | The minimum allowed value. | null |
| max | string | The maximum allowed value. | null |
| increment | number | The increment value when click spinner button. | 1 |
| editable | boolean | Defines if user can type value directly into the field. | true |
| disabled | boolean | Defines if to disable the field. | false |
| readonly | boolean | Defines if the component is read-only. Available since version 1.3.6. | false |
| spinAlign | string | Defines the alignment of the spin buttons. Possible values: 'left','right','horizontal','vertical' Available since version 1.5. | right |
| spin | function(down) | A function called when user click the spinner button. The 'down' parameter indicate if the user click the down button. |
Events
The events extend from textbox, below is the added events for spinner.
| Name | Parameters | Description |
|---|---|---|
| onSpinUp | none | Fires when user click the up spinner button. |
| onSpinDown | none | Fires when user click the down spinner button. |
Methods
The methods extend from textbox, below is the added methods for spinner.
| Name | Parameter | Description |
|---|---|---|
| options | none | Return the options object. |
| destroy | none | Destroy the spinner component. |
| resize | width |
Reset the component width.
Override the original width by passing the 'width' parameter.
Code example:
$('#ss').spinner('resize'); // resize with original width
$('#ss').spinner('resize', 200); // resize with new width
|
| enable | none | Enable the component. |
| disable | none | Disable the component. |
| getValue | none | Get the component value. |
| readonly | mode |
Enable/Disable readonly mode. Available since version 1.3.6.
Code example:
$('#ss').spinner('readonly'); // enable readonly mode
$('#ss').spinner('readonly', true); // enable readonly mode
$('#ss').spinner('readonly', false); // disable readonly mode
|
| setValue | value | Set the component value. |
| clear | none | Clear the component value. |
| reset | none | Reset the component value. Available since version 1.3.2. |