In my first jQuery UI article, we discussed the Interaction element of the functionality, drag and drops, resizing and sorting. In part 2 I will discuss the Widget elements that can be used with jQuery UI, these can be seen as custom controls to all you .net people out there. I’ve tried to go a bit deeper this time round, giving you home grown examples of usage in addition to the jQuery examples, as well as giving you jQuery-only alternatives. Let’s take a look…

Accordion

I love this widget. It’s a great tool to show and hide chunks of data within a page, with the added awesomeness of animations. As long as you mark up your HTML correctly, implementation is really simple. The example above uses:

$("#accordion").accordion({
header: "h3"
});

Beyond this, you are able to assign events to this, for example when an element is opened or closed using change:.

Alternatives: There is also a jQuery plugin, again called Accordion created by Jörn Zaefferer. It’s arguably easier to implement, does exactly the same, and you can customize as much as you want. Implementation can be as easy as:

jQuery('#list1a').accordion();

DatePicker

I discussed using DatePicker in my quick win blog post last week. There really is no better alternative to showing a great inline calendar widget for your forms quickly.

Alternatives: There are jQuery alternatives to this UI widget. Again this one is called “DatePicker” from Kelvin Luck. He’s built in allot of flexibility with this plugin, including something I always need which is from and to dates. I’ve used it a couple of times on projects and found it very well documented and easy to use. He’s got dozens of demos with source code which is really great.

If you need a simple quick win, go with the UI widget, but for ultimate flexibility and jQuery only, Kelvin’s plugin is the way to go.

Dialog

Dialog is very simple, it shows snazzy dialog windows on the desktop – and I love the background effect. However as nice as they are, there are better looking alternatives. If you want to sit pure with jQuery UI, Dialog will do what you need it to do, but plugins like “Thickbox” I’ve found are much smoother and nicer to implement.

Progress Bar

Progress bar is an interesting alternative to the other generic javascript feedback loading techniques out there. Based on where you are in your loading timeline, you can specify a % value against your progress bar element, and it will update. Obviously, if you only update the element 3 times, the animation between states will be pretty jerky, so try to update the progress % of the bar as often as possible. For example, this code would increase a progress bar by 1% every second:

var count = 0;
startProgress();

function startProgress()
{
$("#progressbar").progressbar({
value: count
});
if(count < 100)
{
count = count+1;
setTimeout("startProgress", 1000);
}
}

Alternatives: For you jQuery purists out there there is also a pretty good plugin called “jQuery Progress Bar”. Very similar, however does include some nice animations between progress points which is a great addition.

Slider

For me, Slider is really where jQuery UI comes into it’s own… I love the simplicity of the implementation of Slider, and the flexible options around horizontal, vertical and range is great. The way I have used it in the past is to call certain functionality upon the “change” event – for example – to alter the css opacity of an element in your GUI.

function refreshCSS()
{
var newVal = $("#slider").slider("value");
$("#myElement").css("opacity": newVal);
}

$(function() {
$("#slider").slider({
range: "min",
max: 100,
value: 50,
slide: refreshCSS,
change: refreshCSS
});
});

Alternatives: There aren’t many jQuery plugin options out there unfortunately that meet the greatness of the Slider widget in jQuery UI. One possible option is this slider plugin, however – I’m not convinced by it, and found it sometimes works, sometimes not…

Tabs

The final widget in today’s article is Tabs. Very simple, it’ll take content from pre-defined DIV elements and create a tabbed interface for it. Tabs can be sortable, as well as having events assigned to them on click, like show/hide, loading in content via Ajax, or any other functionality you can think of.

Alternatives: There aren’t many out there to be honest, but this excellent tutorial by Apricot Studios describes how best to achieve tabs with pure jQuery.

Conclusion

I hope you found this article useful as an introduction to the capabilities of jQuery UI, the alternatives out there, as well as some ideas on how you can implement from my home grown examples above. In Part 3 I’ll describe the Effects that you can achieve with jQuery UI.

Tools to help you learn…

jQuery UI 1.6	Amazon Kindle 2	Learning jQuery 1.3

This entry was posted on Thursday, February 26th, 2009 and is filed under Development, Technology, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.