Thiago's Blog

I've been working with jQuery for a while now, but only recently I started using one of its greatest child projects, jQuery UI. I think it's an amazing library and decided to make a few 'how to' posts about it.

If you don't know jQuery UI, it's a client library built on top of jQuery which provides some highly customizable, lightweight, cross-browser client side web controls. Currently on version 1.7, jQuery UI provides DateTimePicker, Tabs, Highlights, Slider among other things. I suggest you to visit the official web site and take a look on what you can do with it. Here's the official website.

The Sample

The sample I'm doing is pretty much a Hello World of the Slider control. I've created an application which changes the font-size attribute of a specific <div> element based on the Slider's value. Click on the image to download the sample.

I believe that as web developers, we have be concerned with the quality or our applications, but also with the user experience. There's nothing really fancy here, but using these controls, we can improve the user experience in a certain way as shown on the sample.

How does it work

The first thing you'll need to run jQuery UI controls is, obviously, to download the library. It already comes with the most recent version of jQuery, "minified". To download, go to http://www.jqueryui.com/download and select what you want. By default, everything is already pre-selected (Core, Interaction, Widgets and Effects). Once you figure which pieces you want, select the Theme and download. If you don't know what the theme look like, go to the themes page http://www.jqueryui.com/themeroller and play with the existing themes, select the one you want and click download, it will redirect you back to the download page, but now your theme will be already selected . You can even create your own theme by customizing an existing one at the themes page.

Once you download the package, note that it comes with all the JavaScript and CSS you'll need, as well as a sample page with all controls. Inside the "css" folder, you'll find a folder named after the theme you selected, and finally, inside this folder you'll find the css and the images you'll need to build your app. Note that it also comes with the a sample page named index.html and a folder named development-bundle, which is a pack of detailed documentation about all controls and more demos. All you'll need is what's inside the js and css folders to your app folder.

Since this sample is nothing but a slider, I won't really create an application folder or anything. I'll just delete the folder "development-bundle", add my own images folder, "img", and change all the markup of index.html file. Note on the code snipped below that I added the references to my scripts and the stylesheet, as well as setting the basic behaviour of the slider control

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

$(function(){
    $("#content_div").css('font-size', 14);
         
    $('#slider').slider({
        range: "min",
        min: 1,
        max: 5,
        value: 2,
        slide: function(event, ui) {
            $("#content_div").css('font-size', 10 + 2 * ui.value);
        }
    });
});

</script>

What the above code does is set a starting value to the text size of  a specific <div>, named content_div, making a <div> named slider into the jQuery UI slider control, as well as setting the slider attributes such as min and max values, start value, direction and an event handler to the slide event. Whenever it sliders, it will set the size of the text inside content_div to the double of the selected value on the slider plus ten. In this case, when it's on position 2, the text size will be 14 pixels, if it's on 3, the text size is going to be 16 pixels and so on.

Now all I need is to place these <div> elements somewhere in the page body and the sample app is complete. I don't have to worry with stylesheets or anything since the jQuery UI script will apply all styles almost automatically by using the theme roller which I shall talk about in another post.

This sample shows how to create a web application with some pretty decent user experience with jQuery UI library.

Download the sample app