Spinner JQuery UI

Using Pg UP / Pg Dn or Up / Down arrow keys we can increase or decrease values.

With default value and size ( optional )

<input id="spinner" class='selector' size=3 value=12> 
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
});
</script>
Classes
Type : Object
Default :
{
  "ui-spinner": "ui-corner-all",
  "ui-spinner-down": "ui-corner-br",
  "ui-spinner-up": "ui-corner-tr"
}
To get the associated Class of the Tab
var present_class = $( "#spinner" ).spinner( "option", "classes.ui-spinner" );
To Set the class
$( "#spinner" ).spinner( "option", "classes.ui-spinner", "highlight" );
culture
Type : string
Default : null
{
 culture: "fr"
}
To get the culture option
var culture = $( "#spinner" ).spinner( "option", "culture" );
To Set the culture option
$( "#spinner" ).spinner( "option", "clture", "fr" );
disabled
Type : Boolean
Default : false
It disables the spinner if set to True.
Initialize the spinner
$( "#spinner" ).spinner({
  disabled: true
});
To get the disabled option
var status = $( "#spinner" ).spinner( "option", "disabled" );
To Set the culture
$( "#spinner" ).spinner( "option", "disabled", true );
icons
Type : Object
Default :
{
	down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" 
}
To get the associated icons of the spinner
var icon_up = $( "#spinner" ).spinner( "option", "icons.up" );
var icon_down=$( "#spinner" ).spinner( "option", "icons.down" );
To Set the icons
$( "#spinner" ).spinner( "option", "icons", { down: "ui-icon-arrow-1-s", up: "ui-icon-arrow-1-n"});
icremental
Type : Boolean
Default : true
$( "#spinner" ).spinner({
  incremental: false
});
To get the value of incremental option of the spinner
var incremental = $( "#spinner" ).spinner( "option", "incremental" );
To Set the incremental option
$( "#spinner" ).spinner( "option", "incremental", true);
max
Type : number or string
Default : null
$( "#spinner" ).spinner({
  max : 200
});
To get the maximum value of the spinner
var max = $( "#spinner" ).spinner( "option", "max" );
To Set the max option
$( "#spinner" ).spinner( "option", "max", 100);
min
Type : number or string
Default : null
$( "#spinner" ).spinner({
  min : 20
});
To get the Minimum option value of the spinner
var min = $( "#spinner" ).spinner( "option", "min" );
To Set the min option
$( "#spinner" ).spinner( "option", "min", 10);
numberFormat
Type : string
Default : null
$( "#spinner" ).spinner({
  numberFormat : 'n'
});
To get the numberFormat
var numberFormat = $( "#numberFormat" ).spinner( "option", "numberFormat" );
To Set the numberFormat option
$( "#spinner" ).spinner( "option", "numberFormat", "n" );
page
Type : number
Default : 10
Number of steps the value of the spinner will take while using Page Up or Page Down keys
$( "#spinner" ).spinner({
  page : 20
});
To get the page option value of the spinner
var page = $( "#spinner" ).spinner( "option", "page" );
To Set the page option
$( "#spinner" ).spinner( "option", "page", 50);
step
Type : number
Default : 1
Number of steps the value of the spinner will take while using Arrow Up or Arrow Down keys
$( "#spinner" ).spinner({
  step : 2
});
To get the step option value of the spinner
var step = $( "#spinner" ).spinner( "option", "step" );
To Set the step option
$( "#spinner" ).spinner( "option", "step", 10);
Methods
destroy
Removes the functionality of the spinner
$( "#spinner" ).spinner( "destroy" );
disable
Disables the spinner
This method does not accept any arguments.
$( "#spinner" ).spinner( "disable" );
enable
Enable the spinner
This method does not accept any arguments.
$( "#spinner" ).spinner( "enable" );
instance
Collect spinner instance object
This method does not accept any arguments.
$( "#spinner" ).spinner( "instance" );
isValid
Checks the value of the spinner if it is within its max , min and step settings of the spinner
This method does not accept any arguments.
var isvalid=$("#spinner").spinner("isValid");
option
We can get the value by giving the option name.
var isDisabled = $( "#spinner" ).spinner( "option", "page" );
Get the object having key value pairs
var option_obj = $( "#spinner" ).spinner( "option" );
pageDown
Decrement the value as per page option
The value is adjusted as per the Max and Min option settings. ( check the demo below )
$( "#spinner" ).spinner( "pageDown" );
This will cause start, stop and spin events to be triggered. We can set the number of pages to decerment ( default is 1 )
$( "#spinner" ).spinner( "pageDown",2 );
pageUp
Increase the value as per page option
The value is adjusted as per the Max and Min option settings. ( check the demo below )
$( "#spinner" ).spinner( "pageUp" );
This will cause start, stop and spin events to be triggered. We can set the number of page to increase ( default is 1 )
$( "#spinner" ).spinner( "pageUp",2 );
stepDown
Decrese the value as per step option
The value is adjusted as per the Max and Min option settings. ( check the demo below )
$( "#spinner" ).spinner( "stepDown" );
This will cause start, stop and spin events to be triggered. We can set the number of step to decrese ( default is 1 )
$( "#spinner" ).spinner( "stepDown",2 );
stepUp
Increase the value as per step option
The value is adjusted as per the Max and Min option settings. ( check the demo below )
$( "#spinner" ).spinner( "stepUp" );
This will cause start, stop and spin events to be triggered. We can set the number of step to increase ( default is 1 )
$( "#spinner" ).spinner( "stepUp",2 );
value
Getting the value of the Spinner
var value = $( "#spinner" ).spinner( "value" );
value(set)
Set the value of the Spinner
$( "#spinner" ).val(value)
Events
change
This is fired when value in spinner is changed and focus is taken out of the spinner. This is not fired as we keep changing the value of the spinner.
$( "#spinner" ).spinner({change: function() {
var value = $( "#spinner" ).spinner( "value" );
$('#d1').html("Spinner value : " + value);
}
})
create
This is fired when value in spinner is changed and focus is taken out of the spinner. This is not fired as we keep changing the value of the spinner.
$( "#spinner" ).spinner(
{create: function( event, ui ) {
$('#d1').html("Spinner is created ");
}
});
spin
This event is fired on changing of the value of the spinner. For every step change or page up down change this event is fired.
$( "#spinner" ).spinner({
spin: function( event, ui ) {
$('#d1').html("Spinner value : " + ui.value);
}
})
start
This event is fired before starting a spin.
$( "#spinner" ).spinner({
start: function( event, ui ) {
$('#d1').html("Spinner has started ");
}
})
stop
This event is fired after a spin.
$( "#spinner" ).spinner({
stop: function( event, ui ) {
$('#d1').html("Spinner has stopped ");
}
})

With the above knowledge we can link one Slider with Spinner, so any one can be changed to reflect the same change in other element. Example: we can change the slider to change the value of the spinner and vice versa.

More on JQuery UI Slider



Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer