If you want to know how to create the spinner widget as well as understand its commonly used options, methods, and events. You have came to the right place

This widget is used to select a numeric value by dragging a handle. The following is the syntax for creating the slider widget:
$(selector).spinner()

$(selector).spinner(options)

An <input> element can be specified as a spinner widget. When the field has focus, the up and down arrow keys can be used to select a value or the mouse can be used to click an appropriate icon to increment or decrement the value.

FOUR STEPS TO BUILD JQUERY SPINNERWIDGET :

1. Add jquery-ui css cdn to the html document
2. Add to the jquery cdn to the html document
3. Add to the jquery ui js cdn to the html document
4. Make file named "slider..html" with given code.

STEP ONE: Add jquery-ui css cdn to the html document

STEP TWO: Add to the jquery cdn to the html document

STEP THREE: Add to the jquery ui js cdn to the html document

STEP FOUR: Make file named "spinner.html" with given code.

<!DOCTYPE html>
<html lang="en">
 <head>   
   <meta charset="utf-8"> 
     <link rel="stylesheet" href="styles/jquery-ui.min.css"> 
     <script src="scripts/jquery-2.1.0.min.js"></script>      
<script src="scripts/jquery-ui.min.js"></script>          
 <style>       #txtAge { width:50px; }      </style> 

<script>       $(function() {
             $("#txtAge").spinner(              {                    min:18,                    max:70              }); 

$("#txtAge").spinner("value", 25); 

  });      </script> 
</head>
 <body>     
 <div class="ui-widget">      
 <label for="txtAge">Age:</label> 
      <input id="txtAge">
      </div>
 </body>
 </html>

EXAMPLE :

Age:

How It Works
Within the document ready function of this example, the spinner() method sets the input element—with the ID set to txtAge—as a spinner widget. The options used in this example are min and max, which specify the range of values that can be selected using this widget. The $("#txtAge").spinner("value", 25) statement sets the value of the selected spinner to 25. Figure 10-2 displays the page when the user clicks on the up and down arrow keys. F

The other commonly used options for the spinner widget are:

•step—The amount of increment/decrement with each up/down arrow click. It can be a whole number or a decimal. The default value is 1.

The commonly used events for the spinner widget are:
• spin—Triggered when the widget’s value is incremented/decremented. ui.value contains the new value. If the callback function returns false, the value of the widget is not changed. .
• change—Triggered when value of the widget changes and it loses its focus. .

The commonly used methods for the spinner widget are:
• value()—Gets the current value of the spinner widget .
• value(newValue)—Sets the value of the spinner widget with the specified new value .

The CSS classes specific to the spinner widget are:

• ui-spinner—Used for the input textbox , whkich is set as the spinner widget
• ui-spinner-button—Used for the spinner's up and down arrow buttons .
• ui-spinner-up—Used for the spinner's up arrow buttons .
• ui-spinner-down—Used for the spinner's down arrow buttons .

No comments:

Post a Comment