Grow your CSS skills. Land your dream job.

Hot off the Presses: jQuery UI v1.5 featuring “Themeroller”

Published by Chris Coyier

jQuery UI version 1.5 was just released, and it's going to be a big one. For us designers and CSS coders, here are a couple of major highlights:

  • Class transitions (morphing): $("div").addClass("green", "slow"). So now instead of being able to "instantly" add a class to any page element (which instantly applies all CSS attributes from that class), we can now "morph" into that class (which will animate into the CSS attributes in that class).
  • Easier file structure. This just means it is going to be easier to get up and running with jQuery UI because it has much less dependencies. Since jQuery 1.2.6, the dimensions stuff has been built in, so no more need to include that separately. Also no more need for the UI Core and UI Mouse.
  • Stand-alone effects. If you were a Prototype holdout because of script.aculo.us, hold out no longer. Every known effect from script.aculo.us is now included (blind, bounce, drop, fold, slide, puff...), only now more configurable. There are also some new really cool ones like transfer, explode, clip and scale.
  • ...and that's not all. That is just the tip of the iceberg. Peruse the juicy changelog for yourself.

 

Themeroller

This is the most exciting part for people new to jQuery and to jQuery UI. Probably the most common reason for people (especially designers) to pick up a javascript library is so they can build in things like tabbed boxes, accordions and date pickers and little bits like that without going through all the work it takes to write something like that from scratch.

jQuery made those things easy to do and jQuery UI made them even easier. But you still had to do all of the designing and customization on your own through CSS. Of course we want to have that control, but wouldn't it be nice if we didn't have to do it from scratch? That's where Themeroller comes in. Themeroller is part of the jQuery UI site where you can design and build your own custom theme for your own suite of widgets. Simply adjust the colors, fonts, and textures to your liking and it will customize a download for you with all those widgets in your custom style ready to rock. Doesn't get much easier than that!

 

Thanks and Credits

I want thank Rey Bango for letting me have a sneak peak of all this stuff as they were working on it. Rey is a part of the jQuery team as an evangelist.

Special thanks goes out to the Filament Group, who built the amazing Themeroller.

Special thanks has also been given to the Liferay staff, who invested countless hours into the development of the new UI website, and with whom the jQuery worked closely together with to stabilize jQuery UI for all kinds of enterprise situations.

Comments

  1. Thanks for all your posts and tutorials and links to all things jQuery. I shyed away from it in the past but now I’m going to jump right in and learn more!

  2. JQuery is so nice! It’s changed my views on javascript completely. Good the new JQuery-UI is here, I’ve been waiting for it.

  3. stoooooooooooked

    been waiting for this.

  4. Chad
    Permalink to comment#

    Call me an idiot but I still can’t understand what is it for. What is the difference between jQuery and jQuery UI and what I can do with jQuery UI that I can’t do with jQuery? Yes, I’m confused.

    Thanks.

  5. @Chad – Yeah it can be a little confusing… You can think of jQuery itself as the “core” and jQuery UI as basically a big multi-featured plugin for jQuery. UI makes certain interface things that you commonly need to do as a designer much easier. For example, if you want to make a page element resizeable, you could write something to do that with jQuery alone. But with jQuery UI, it’s pretty much a one-liner:

    $("#simpleDiv").resizable({ 
        handles: "all" 
    });
    
  6. Jason
    Permalink to comment#

    Do you use the contracts on the designers toolbox? I don’t want to buy them and they are no good to me. Anyone used these?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".