In my last post I showed how to easily add slider functionality using JQuery. In this post I will showcase some of the options that slider provides with a Temperature Converter. This is how it will work: the slider represents temperature measured in Celsius units and ranges between 0 and 100. As the user drags the slider, we will display the temperature equivalent in Fahrenheit.
Lets start by registering a basic slider:
<script type="text/javascript">
$(function()
{
$("#slider").slider();
});
</script>
Since the slider converts temperatures in the range 0 celsius and 100 celsius, modify the slider definition to include the range:
$("#slider").slider({
min: 0,
max: 100,
step: 1
});
The next step is to add two span tags to display the chosen temperature and the temperature in Fahrenheit:
Temperature in Celsius: <span id="celsius">0</span>
Temperature in Fahrenheit: <span id="fahrenheit"></span>
Finally all we need to do would be to captrue the slide event so that we can update the span tags:
$("#slider").slider({
min: 0,
max: 100,
step: 1,
slide: handleSlide
});
The handleSlide is a javascript function that looks like this:
function handleSlide(event, ui)
{
// Update the celsius span
$("#celsius").html(ui.value);
// Compute the fahrenheit equivalent
var fTemp = (1.8 * ui.value) + 32;
// Just display the last two digits of the temp
$("#fahrenheit").html(fTemp.toFixed(2));
}
Here is a working demo
Here are five easy steps to add slider functionality to your web applications:
Step 1: Go to JQuery UI site and create a custom download. To keep things simple, select “No Theme”.under theme section and deselect all but UI Core and Slider checkboxes. Hit Download and unzip the downloaded file.
Step 2: Copy the jquery-1.3.2.min.js and “jquery-ui-1.7.2.custom.min.js” files into your project. These files should be under the js folder. Include the js files in your html/jsp page.
Step 3: Add the following styles to the page:
I am using the slider bar and slider handle images from YUI
Step 4: Add a DIV for the slider in the HTML.
Step 5: Initialize the slider in the document ready function:
That’s it. You can find a demo of this example here.
This is more for my reference and hopefully helps others working with JQuery.
-
Getting and Setting the innerHTML of an element
var content = $("#id").html();
$("#id").html("Some HTML");
-
Getting and Setting the text (with out any HTML) of an element
var txt = $("#id").text();
$("#id").text("Some Text");
-
Removing content from an element
$("#id").empty();
-
Getting and Setting style properties
var displayValue = $("#id").css("display");
$("#id").css("display", "block");
-
Hiding and Displaying elements
// Toggles an element's visibility
$("#id").toggle();
$("#id").hide();
// Sets the display style property to block and not inline
$("#id").show();
-
Registering to events such as keyup
$("#id").keyup(function(){
alert($(this).val());
});
-
Dealing with CSS classes
// Adds the specified class to the element
$("#id").addClass("showme");
// Multiple classes should be separated by spaces
$("#id").addClass("showme1 showme2");
// Removes the specified class
$("#id").removeClass("hideme");
// Multiple classes should be separated by spaces
$("#id").removeClass("hideme1 hideme2");
// Removes all the classes
$("#id").removeClass();
-
Getting and Setting values of form elements
// For input boxes
$("#inputbox").val(); // Returns the text box value
$("#inputbox").val("set some value");
// For select boxes
$("#selectbox").val(); // Returns the selected value
// To get the text of the selected option
$("#selectbox :selected").text();
// Programatically selects a value or multiple values
$("#singleselect").val("123");
$("#multipleselect").val(["12", "234"]);
// For checkboxes and radio buttons
$("#chkId").val(); // Returns value whether the check box is checked or not
// Returns true when the check box is checked
$("#chkId").attr("checked");
// Programatically checks the check box
$("#chkId").attr("checked", "checked");
I feel that an important advantage of using JQuery is its ability to separate behavior from structure. Consider the case where you want to trigger a JavaScript method when a link is clicked. A common implementation would be:
Even though this mixing of behavior (JavaScript) and structure (HTML) looks straight forward, it can become a maintenance issue in large projects. This is where JQuery shines. Using JQuery, the above code can be rewritten in a cleaner way:
Now, consider a slightly trickier case where context specific parameters need to be passed to the JavaScript method:
Here is the refactored version using JQuery:
JQuery’s form plugin provides several convenient methods for clearing/resetting form element values. However, the clearForm method does not reset hidden fields. Here is a simple implementation for clearing hidden fields:
jQuery.fn.clearHiddenFields = function() {
return this.each(function(){
$("input[type='hidden']", this).each(function(){
this.value = '';
});
});
};
Invoking this method is very straightforward:
$("#yourformid").clearHiddenFields();
or simply:
$("form").clearHiddenFields();