jQuery EasyUI Form Plugin -Spinner


jQuery EasyUI 插件jQuery EasyUI Plugins

Extends from $.fn.validatebox.defaults. Override the default defaults with $.fn.spinner.defaults.

The spinner combines an editable text box with two small buttons, allowing the user to select from a range of values. Similar to the combobox, the spinner allows the user to enter a value, but it does not have a drop-down list. The spinner is the base component for creating other spinner components (such as numberspinner, timespinner, etc.).

Dependencies

  • validatebox

Usage

The spinner should be created with JavaScript. Creating it from markup is not allowed.

<input id="ss" value="2">
$('#ss').spinner({
    required:true,
    increment:10
});

Properties

This property extends from validatebox. The following are the properties added for the spinner.

Name Type Description Default Value
width number The width of the component. auto
height number The height of the component. This property is available since version 1.3.2. 22
value string The initial value.
min string The minimum allowed value. null
max string The maximum allowed value. null
increment number The increment value when clicking the spinner buttons. 1
editable boolean Defines whether the user can directly enter values into the text field. true
disabled boolean Defines whether the text field is disabled. false
spin function(down) The function called when the user clicks the spinner button. The 'down' parameter indicates whether the user clicked the down spinner button.

Events

Name Parameters Description
onSpinUp none Triggered when the user clicks the up spinner button.
onSpinDown none Triggered when the user clicks the down spinner button.

Methods

This method extends from validatebox. The following are the methods added for the spinner.

Name Parameters Description
options none Returns the options object.
destroy none Destroys the spinner component.
resize width Resets the component's width. Override the initial 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 Enables the component.
disable none Disables the component.
getValue none Gets the component's value.
setValue value Sets the component's value.
clear none Clears the component's value.
reset none Resets the component's value. This method is available since version 1.3.2.

jQuery EasyUI 插件jQuery EasyUI Plugins Other Extensions