Introduction to jQuery UI

read 21 comments

After many months of stellar work, the jQuery UI team has released version 1.5 of their flagship suite of user-interface widgets, components, and effects. This release was focused on bringing you a standardized development API across all of the components, allowing for a more seamless experience when working with the jQuery UI library.

A very exciting CSS theming application was also released with jQuery UI 1.5, called ThemeRoller. ThemeRoller is an amazing way to customize the style and colors across all of the jQuery UI components. It comes with a few preset styles, as well as allowing you to create your own. Once you are done, it packages your theme into a zip file that contains all of the images and CSS you need.

Brief Overview of the jQuery UI Project

The jQuery UI project was originally created to bring you a set of "official" jQuery plugins. Mature components from the plugins repository were pulled together to form the first release of jQuery UI. But since each of these plugins had its own style, having been written by different authors, the first release of the library felt a bit cumbersome when packaged together. With that in mind, the focus of UI 1.5 was on achieving a coherent, standardized API to eliminate much of the differences between the components. Through much time and effort, many bugs and feature requests were addressed along the way as well.

Inside Look at jQuery UI Version 1.5

Before starting, I want to make sure you know where the jQuery UI Documentation is located. You may also want to head to the download page to grab the library for yourself. Note that the development bundle is the easiest to get started with.

First, let's start by including the necessary files for jQuery UI: jQuery latest js file, the Flora theme complete stylesheet, and the core UI file. Each of the components is built on top of these files. Here is how to include them:

HTML:
  1. <link rel="stylesheet" href="themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
  2. <script src="http://code.jquery.com/jquery-latest.js"></script>
  3. <script src="ui/ui.core.js"></script>

You may want to download these files and put them on your own server, but this is just fine for our demonstration.

At this point you may include the jquery.ui.all.js script for testing, or include each of the components individually. Here are the components that we are using for this demo:

HTML:
  1. <script src="ui/ui.draggable.js"></script>
  2. <script src="ui/ui.resizable.js"></script>
  3. <script src="ui/ui.accordion.js"></script>

Activating Components

Each component has a constructor method, which is the component name. For instance, we can make a div draggable by using the draggable() method:

JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme").draggable();
  3. });

The component defaults can be overridden by passing in options to the main function. For instance, if we want to make the div drag only horizontally, we can set the axis option to "x" with the following code:

JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme-x").draggable({ axis: "x" });
  3. });

Likewise, the Accordion can be accessed the same way. Here we set a custom option to specify the accordion to slide on the mouseover event:

JavaScript:
  1. $(document).ready(function() {
  2.   $("#accordionDemo").accordion({ event: "mouseover" });
  3.  
  4. });

  • Test 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Test 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  • Test 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some of the components, such as draggable and resizable, can even be combined:

JavaScript:
  1. $(document).ready(function() {
  2.   $("#dragme-resize").draggable().resizable();
  3. });

This first makes the div draggable, then adds the resize handles to the div.

Now you should have what you need to start with each of the components! Head to the functional demos page to see in-depth examples of each of the components.

Looking at the Future of jQuery UI

With Paul Bakaus hired as (paid) full-time lead of jQuery UI, the project has been energized, charging forward by leaps and bounds. With an ever-growing set of UI components, jQuery UI's future is shaping up to be one of great promise.


comment feed

21 comments

  1. Cloudream

    Great article~

  2. Michael

    Great article. About a month ago I started a series of jQuery UI tutorials over on my blog: http://mdrisser.r1designs.net/blog
    Glad to see more attention being paid to this great addition to jQuery.

  3. Henrik

    In Opera the accordion example does not work: the sections of the accordion is constantly visible and on mouse over the look changes and some margin/padding changes.

    I realize that this might not be the best place to put this, but I thought that it could be something to point out...

  4. Hi Henrik,

    Thanks a lot for the information. Actually, it wasn't working in Safari 3.1 either. The problem was caused by the way WordPress was trying to insert paragraphs and line breaks. It often messes up anything but the simplest HTML in posts.

    It should be fixed now. If you still see problems with the accordion, give us a shout.

  5. I didn't think of WordPress messing with the HTML. Thanks for fixing this, Karl.

  6. Sam

    Opera 9.51.

    Activating Components example. First block just disappears. Found block near second comment. Second(draggable({ axis: "x" });) slightly jumps to the right on dragging start.

    Accordion is OK.

    Resizable example applies position absolute when dragging. Bad :(

  7. Umm... does the accordian need the href? If so, shouldn't it just point at the accordian instead of # so that when users click it it doesnt actually do anything rather than jumping them to the top of the page?

  8. Ok, so maybe it does, but the href should be pointed at #accordionDemo... or what ever your accordion's container is called....

  9. Great article,I am chinese student.English is poor,but I like it. it looks very beautiful. I learn javascript Now.thank you for you article. I will take attention to
    this site.

  10. David

    Your drag samples do not work correctly in IE 6.0. Try it and you'll see what I mean. I don't know whether you intend supporting this browser version, but I've just been reading Jeff Atwood saying how jquery et al. take away the pain of working around browser variations, so I'm hoping that you are.

  11. Simon Geard

    One slightly annoying feature in the accordian example - if the mouse passes over one segment on the way to another, it opens that segment immediately, and then doesn't open the one I was actually aiming for. I guess it won't trigger a second open if another is still animating?

  12. Have to "view page source" to understand accordion. But thanks for the articles.

  13. Vaughn

    Interesting. I am using Jquery 1.2.6 and Jquery UI 1.6rc2, and tried to apply $("#dragme-resize").draggable().resizable(); to an image. It doesn't work on the image, it becomes resizable but not draggable. Are you aware of any reason images would behave different in this respect than a div? It works fine if applied to a div.

  14. Great article Marc, I was a little confused about somethings about jQuery but you have made it very clear and easy.

    Thanks a lot man and guys at jQuery keep up the great work.

  15. Great article, and jQuery still the best in my opinion.

  16. pikatzu

    is there a website where i can learn everything about jquery? i would like to include some of the javascript in my website

  17. How can I make the jQueryUI tabs fade out or collapse?

  18. Ganga

    This is a great article for beginners like me.

  19. I love UI but ThemeRoller creates massive file sizes and so it is better to create your own CSS and graphics.

  20. outstanding effects.thanks a lot.

7 Pings

  1. Learning jQuery » Introduction to jQuery UI...

    Learning jQuery » Introduction to jQuery UI...

Sorry, but comments for this entry are now closed.


Advertise on our network
See our other websites