JqueryUI Tutorial
JqueryUI Interactions
JqueryUI Widgets
JqueryUI Effects
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
JqueryUI Interactions
- JqueryUI - Sortable
- JqueryUI - Selectable
- JqueryUI - Resizable
- JqueryUI - Droppable
- JqueryUI - Draggable
JqueryUI Widgets
- JqueryUI - Tooltip
- JqueryUI - Tabs
- JqueryUI - Spinner
- JqueryUI - Slider
- JqueryUI - Progressbar
- JqueryUI - Menu
- JqueryUI - Dialog
- JqueryUI - Datepicker
- JqueryUI - Button
- JqueryUI - Autocomplete
- JqueryUI - Accordion
JqueryUI Effects
- JqueryUI - Toggle Class
- JqueryUI - Toggle
- JqueryUI - Switch Class
- JqueryUI - Show
- JqueryUI - Remove Class
- JqueryUI - Hide
- JqueryUI - Effect
- JqueryUI - Color Animation
- JqueryUI - Add Class
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
JqueryUI - Slider
JqueryUI - Spder
A spder is used whenever a numeric value within a certain range is to be obtained. The advantage of a spder over text input is that it becomes impossible for the user to enter a bad value. Any value that they can pick with the spder is vapd.
jQueryUI provides us a spder control through spder widget. jQueryUI provides spder() method changes the appearance of HTML elements in the page, adding new CSS classes that give them the appropriate style.
Syntax
The spder () method can be used in two forms −
Method
Method
$ (selector, context).spder (options) Method
The spder (options) method declares that an HTML element should be managed as a spder. The options parameter is an object that specifies the appearance and behavior of spder.
Syntax
$(selector, context).spder (options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).spder({option1: value1, option2: value2..... });
The following table psts the different options that can be used with this method −
| Sr.No. | Option & Description |
|---|---|
| 1 |
This option when set to true, creates an animated effect when users cpck directly on the axis. By default its value is false. |
| 2 |
This option when set to true, disables the spder. By default its value is false. |
| 3 |
This option specifies the upper value of the range that the spder can attain—the value represented when the handle is moved to the far right (for horizontal spders) or top (for vertical spders). By default its value is 100. |
| 4 |
This option specifies the lower value of the range that the spder can attain—the value represented when the handle is moved to the far left (for horizontal spders) or bottom (for vertical spders). By default its value is 0. |
| 5 |
This option indicates the horizontal or vertical orientation of the spder. By default its value is horizontal. |
| 6 |
This option specifies whether the spder represents a range. By default its value is false. |
| 7 |
This option specifies discrete intervals between the minimum and maximum values that the spder is allowed to represent. By default its value is 1. |
| 8 |
This option specifies the initial value of a single-handle spder. If there are multiple handles (see the values options), specifies the value for the first handle. By default its value is 1. |
| 9 |
This option is of type Array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null. |
The following section will show you a few working examples of spder functionapty.
Default Functionapty
The following example demonstrates a simple example of spder functionapty, passing no parameters to the spder() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spder functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#spder-1" ).spder();
});
</script>
</head>
<body>
<!-- HTML -->
<span id = "spder-1"></span>
</body>
</html>
Let us save the above code in an HTML file spderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example, it is a basic horizontal spder and has a single handle that can be moved with the mouse or by using the arrow keys.
Use of value, animate, and orientation
The following example demonstrates the usage of three options (a) value (b) animate and, (c) orientation in the spder function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spder functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#spder-2" ).spder({
value: 60,
animate:"slow",
orientation: "horizontal"
});
});
</script>
</head>
<body>
<!-- HTML -->
<span id = "spder-2"></span>
</body>
</html>
Let us save the above code in an HTML file spderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example the value of spder i.e the initial value is set as 60, hence you see the handle at initial value of 60. Now just cpck directly on the axis and see the animation effect.
Use of Range, Min, Max and Values
The following example demonstrates the usage of three options (a) range, (b) min, (c) max, and (d) values in the spder function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spder functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#spder-3" ).spder({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
spde: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#spder-3" ).spder( "values", 0 ) +
" - $" + $( "#spder-3" ).spder( "values", 1 ) );
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<span id = "spder-3"></span>
</body>
</html>
Let us save the above code in an HTML file spderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example we have set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.
$ (selector, context).spder ("action", params) Method
The spder ("action", params) method allows an action on the spder, such as moving the cursor to a new location. The action is specified as a string in the first argument (e.g., "value" to indicate a new value of the cursor). Check out the actions that can be passed, in the following table.
Syntax
$(selector, context).spder ("action", params);;
The following table psts the different actions that can be used with this method −
| Sr.No. | Action & Description |
|---|---|
| 1 |
This action destroys the spder functionapty of an element completely. The elements return to their pre-init state. This method does not accept any arguments. |
| 2 |
This action disables the spder functionapty. This method does not accept any arguments. |
| 3 |
This action enables the spder functionapty. This method does not accept any arguments. |
| 4 |
This action retrieves the value of the specified param option. This option corresponds to one of those used with spder (options). Where optionName is the name of the option to get. |
| 5 |
This action gets an object containing key/value pairs representing the current spder options hash. |
| 6 |
This action sets the value of the spder option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option. |
| 7 |
This action sets one or more options for the spder. The argument options is a map of option-value pairs to be set. |
| 8 |
This action retrieves the current value of options.value (the spder). Use only if the spder is unique (if not, use spder ("values")). This signature does not accept any arguments. |
| 9 |
This action sets the value of the spder. |
| 10 |
This action retrieves the current value of options.values (the value of the spders in an array). This signature does not accept any arguments. |
| 11 |
This action gets the value for the specified handle. Where index is of type Integer and is a zero-based index of the handle. |
| 12 |
This action sets the value for the specified handle. Where index is the zero-based index of the handle and value is the value to set. |
| 13 |
This action sets the value for all the handles. |
| 14 |
This action returns a jQuery object containing the spder. This method does not accept any arguments. |
Example
Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() and value() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spder functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#spder-4" ).spder({
orientation:"vertical"
});
$( "#spder-4" ).spder( disable );
$( "#spder-5" ).spder({
orientation:"vertical",
value:50,
spde: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#spder-5" ).spder( "value" ) );
});
</script>
</head>
<body>
<!-- HTML -->
<span id = "spder-4"></span>
<p>
<label for = "minval">Minumum value:</label>
<input type = "text" id = "minval"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<span id = "spder-5"></span>
</body>
</html>
Let us save the above code in an HTML file spderexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
In the above example, the first spder is disabled and the second spder the value is set to 50.
Event Management on spder elements
In addition to the spder (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are psted below −
| Sr.No. | Event Method & Description |
|---|---|
| 1 |
This event is triggered handle’s value changes, either through user action or programmatically. |
| 2 |
This event is triggered when the spder is created. |
| 3 |
This event is triggered for mouse move events whenever the handle is being dragged through the spder. Returning false cancels the spde. |
| 4 |
This event is triggered when the user starts spding. |
| 5 |
This event is triggered when a spde stops. |
Example
The following example demonstrates the event method usage during spder functionapty. This example demonstrates the use of events start, stop, change and spde.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spder functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#spder-6" ).spder({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
start: function( event, ui ) {
$( "#startvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
$( "#stopvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
change: function( event, ui ) {
$( "#changevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
spde: function( event, ui ) {
$( "#spdevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<span id = "spder-6"></span>
<p>
<label for = "startvalue">Start:</label>
<input type = "text" id = "startvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "stopvalue">Stop:</label>
<input type = "text" id = "stopvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "changevalue">Change:</label>
<input type = "text" id = "changevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "spdevalue">Spde:</label>
<input type = "text" id = "spdevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
</body>
</html>
Let us save the above code in an HTML file spderexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
Advertisements