Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Custom Spinner with jQuery and HTML5

See in this article all the steps necessary to implement your own custom spinner using only jQuery, jQuery UI libraries and HTML5


jQuery UI is a library based on JavaScript (jQuery) and CSS that allows you to add functionality to web pages interface in a very simple and practical way. To use we need simply to reference three files from the HTML code:
  • JS file for jQuery library;
  • JS file for jQuery UI library;
  • CSS file containing the jQuery UI stylesheet;

This can be done by adding the following code snippet to the header (head) of the document.

Listing 1: Referencing the library
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
It is important that the reference to jQuery script is made before the reference to jQuery UI, since it depends on the first to to work.

Then, for each feature that you want to add (calendars, tabs, menus, etc.) there are functions that must be invoked from an script internal or external to the page. In the examples in this article will only be used inside scripts, added below the code from Listing 1, in the document header.

Using Spinner component


The spinner component is a field for entering values (usually numbers or dates) that has two control buttons, which allow you to increase or decrease the value of the input.

This control is widely used in situations where it is necessary for the user to enter frequently numerical values or dates, avoiding the need for constant typing. With it, the user can use the control buttons to make small increments or decrements in the value without using the keyboard.

In jQuery UI, the spinner is formed from an input whose type attribute do not need to be defined, because the library is responsible to make the necessary settings.

So after adding the scripts above in the document head, we can add an input in the page body to test spinner functionality. This can be done, for example, insertingthe following codebetween the body tags.

Listing 2: Input that gives rise to the spinner
<h1>Using spinner</h1> 
<p>
    <input id="field" /> 
</p>
Then, using the jQuery syntax, we selected the input and called from it the "spinner" function, defined in "jquery-ui.js" file. The following code creates a basic spinner when added to the document.

Listing 3: Creating the basic spinner
<script>
$(function() {
    $("#field").spinner();
});
</script>
Saving the above codes in an .html file extension and opening the browser, the result is shown in the following figure.



Figure 1: Basic Spinner

Note: it is worth nothing that the spinner has been styled with rounded edges and gray tone, which is the jQuery UI basic pattern defined in the CSS file.

By pressing the control buttons, the input value is changed by one more or less, keeping just a whole numeric value, which is the default format.

Working with decimal values


Whereas not always the values used in this type of field are integers, the jQuery UI provides sppiner formatting content features, allowing you to use decimal numbers and currency values.

To set the spinner to display decimal values, just move your keyword argument "step" by calling the spinner function. In the example below we have the complete code of the page where we are defining the spinner works with two decimal places and initialize its value to 1:08.

Listing 4: Setting number of decimal places
01 <html>
02 <head>
03     <meta charset="utf-8" />
04     <title>Spinner jQuery UI</title>
05     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
06     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
07     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
08 <script>
09 $(function() {
10     $("#field").spinner({
11         step:0.01
12     });
13 });
14 </script>
15 </head>
16 <body>
17 <h1>Using o spinner</h1>
18 <p>
19     <input id="field" value="2.79"/>
20 </p>
21  </body>
22 </html>
The result is shown in the following image.



Figure 2: Spinner with two decimal places

Defining the range of values


Too often we need to limit the values entered by the user in a predefined range. In case of the spinner, this may be implemented with the definition of the min and max arguments in the function call. In the following example the accepted range of values is from 1 to 10.

Listing 5: Limiting the range of values
01 <html>
02 <head>
03     <meta charset="utf-8" />
04     <title>Spinner jQuery UI</title>
05     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
06     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
07     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
08 <script>
09 $(function() {
10     $("#field").spinner({
11         min:1,
12         max:10      
13     });
14 });
15 </script>
16 </head>
17 <body>
18 <h1>Using spinner</h1>
19 <p>
20     <input id="field" value="1.08"/>
21 </p>
22  </body>
23 </html>
Upon reaching the extremes, the control buttons perform no further action. However, the user is not prevented from entering the above values below the track directly. To avoid this kind of situation you need to apply a validation method.

Controlling component events


It is also possible to control some events occurring in the component when its value changes, for example, the spin event that is triggered when a button is pressed.

To perform this treatment simply define a method within the spinner function call, as shown in Listing 6, where we display the value of the spinner in a span.

Listing 6: Controlling the spin event
01 <html>
02 <head>
03     <meta charset="utf-8" />
04     <title>Spinner jQuery UI</title>
05     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
06     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
07     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
08     <script>
09     $(function() {
10         $("#field").spinner({
11             spin: function( event, ui ) {
12                      $("#selected").text(ui.value.toString());
13                   }     
14         });
15     });
16     </script>
17 </head>
18 <body>
19     <h1>Using spinner</h1>
20     <p>
21         <input id="field" value="1.08"/>
22     </p>
23     <h2>selected field value: <span id="selected"></span></h2>
24  </body>
25 </html>
Just run the page in your browser, and you'll see the same result as in the next figure:


Figure 3: Result of the example

Currency


It is also possible to define some examples where we need to have the field values ranged by currencies. The code shown in Listing 7 brings an example of this use, where a spinner increments through values at $25 increments, all with the same clean API.


Listing 7:Currency spinner example
01 <html>
02 <head>
03     <meta charset="utf-8" />
04     <title>Spinner jQuery UI</title>
05     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
06     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
07     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
08     <script>
09     $(function() {
10         $('input').spinner({
11 			min: 25,
12 			max: 2500,
13 			step: 25,
14 			numberFormat: "C"
15 		});
16     });
17     </script>
18 </head>
19 <body>
20     <h1>Currency - USD</h1>
21     <p>
22         <input value="25" />
23     </p>
24  </body>
25 </html>
To see the results, just rerun the app in the browser, and you'll see something like that:


Figure 4: Result of the example with currency

You can also use Globalize.js API to format the currency values inside the fields.

Time


If you need to accept time dataspinnercan be used for that as well (Listing 8).


Listing 8: Timespinner example
01 <html>
02 <head>
03     <meta charset="utf-8" />
04     <title>Spinner jQuery UI</title>
05     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
06     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
07     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
08     <script>
09     $(function() {
10         $('input').timespinner();
11     });
12     </script>
13 </head>
14 <body>
15     <h1>Time - U.S. 12 hour clock</h1>
16     <p>
17         <input value="08:00 PM" />
18     </p>
19  </body>
20 </html>
The result can be seen in Figure 5.


Figure 5: Result of the example with time

Conclusion


The spinner component also has a number of other properties, methods and events whose documentation can be found in http://api.jqueryui.com/spinner/ address. In this link are also found several instances of use to facilitate learning.

This concludes this article. See you in the next. Good studies.


Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login