Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

Creating Spinner Widget

Notes:

jQuery UI - Creating Spinner Widget :

Spinner Widget: indicates a spinner UI control used to get range of numeric values

Creating Spinner Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spinner Demo</title>
</head>
<body>
</body>
</html>

2. Link the necessary jQueryUI libray files to the HTML document

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

3. Code the structure of the widget (i.e. HTML or markup):

To create a spinner widget; we need to create a text input field
<input type="text" value="0" id="spinner"/>

4. Select the element using jQuery and call the respective jQuery UI function on it

Select the element using jQuery selector, call spinner jQuery UI function on it.
<script type="text/javascript">
$("#spinner").spinner(); // +ve as well as –ve values
</script>

Interview Questions: