A slider is good at handling rough inputs and visualizing them but bad for gathering exact values. An example would be a pixel value in a layout component, where the value has to be tuned in very small increments, pixel by pixel. With a standard input, the keyboard has to be used: click the field, remove the current value and enter a new value, repeat for each increment.
The jQuery UI spinner widget can solve this problem by adding up and down buttons to the input to enable mouse interaction as well as handle keyboard events like cursor up and down.
All you need is a regular text input:
This will create and position the up/down buttons and add the necessary keyboard handling events.
Use the spinner plugin to add buttons to in- and decrement the value, either by clicking the buttons or giving the input focus and using the cursor keys.
It also restricts the input to numeric values—when entering abc into the spinner, it’ll get replaced with the default value on blur. Unless specified otherwise, it’s a zero.
The plugin offers a few options to restrict the input further:
minsets the lower limit, e.g., −10 or 100.
maxsets the upper limit, e.g., 10 or 200.
stepping restricts the value to certain increments, e.g., 5; the default is 1.
When the spinner is used to input a currency value, the currency option can be used to display the appropriate symbol inside the input.
The following example puts these all together and creates a form for donating money:
We bind a change event to the currency select to update the currency option of the spinner whenever the selection changes.
The spinner itself is initialized with the current value, as well as limits for min, max, and step, restricting the value somewhere between 5 and 1,000, with increments of 5, e.g., 10, 15, 20, and so on.
Google Maps integration
The value may also be a decimal number; in that case, the decimal option can be used to specify the number of allowed digits after the decimal point. In the following example, we display a Google map and use spinners to specify the latitude and longitude values.
To start with, we include the Google Maps API scripts:
With that in place, we can add markup for the spinners and the actual map, along with some minimal styles:
The position function sets the center of the map to the latitude and longitude values obtained from the spinners. They are initialized with the decimal option set to 6, and passing the position function for the change option. With that, the map is updated whenever one of the spinners changes. Then the map itself is initialized, using the Google Maps API.
The drawback of the spinner in this case is that increments and decrements affect only the digits before the decimal point, so scrolling is rather rough. The increment option rounds any value below one up to one, so it can’t help here.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.