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.
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.
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!
been waiting for this.
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.
@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:
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?