Introduction to jQuery UI

Building the fancy, web 2.0 / Ajaxy, user interfaces for a web application we've all come to expect is, frankly, a pain in the ass. Depending on the JavaScript library you're using there's usually some addon library to extend the functionality for UI which helps make it easier and ease the pain. If you're using jQuery (and to be honest I'm more of a Prototype guy) a good library is jQuery Ui.

According to the official site:

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library. Each component is built according to jQuery's event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

I only ran into it because of an update to WP-Click-Track and Wordpress uses jQuery so I kinda had to. Not that it's a bad thing; I like jQuery a little bit more because of jQuery UI.

One of the really cool things about jQuery UI is that there's an online tool to generate a custom download specific to the project. Having worked with JavaScript libraries for a while I appreciate the customization and convenience of having the smallest footprint as possible. Kudos to them on that.

There's also a Theme Builder that gives a good overview of what's available by default along with some preset themes to test; there's a good deal of widgets there to work with. Almost, almost, makes me want to start a project with it.

Implementation is really elegant too; if you know how jQuery works it'll be pretty obvious. Otherwise take a look at the below for creating tabs:

<div id="tab-jquery-id">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
<li><a href="#tab5">Tab 5</a></li>
</ul>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
</div>
 
<script type="text/javascript">
//<!|\.)/));
	$("#tab-jquery-id"+(needs_jquery_hotfix ? ">ul" : "")).tabs({
		selected: 0
	}); 
	$('.tab5:last').show().removeClass('tab5');
});
//]]]]><![CDATA[>
</script>

As you can see there's not much there in so far as design or class decorators go; most of that's handled by jQuery itself as well as the generated css. The only thing to really worry about is adding the wrapper div id in the bottom JavaScript. Still, not a bad thing.

This, of course, barely scratched the surface of jQuery UI but it doesn't get much more difficult. If you're using jQuery for a library and you need to make something cool it's definitely worth checking out.

Tags: JavaScript jquery user interface

This entry was written by Eric Lamb and posted on November 06th, 2009 at 5:00 am and is filed under Code, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response below.

Made of Everything You're Not