jQuery UI focusing more on API, Plugins, Themes and Effects

Paul Bakaus & the jQuery UI team recently released jQuery UI v1.5

The team set out to build a generic, basic, and simple way of adding and extending core interaction to DOM elements. Their first task was to build a generic API that allowed for maximum flexibility while being amazingly simple. The next task was making it similarly simple to develop plugins for that API.

jQuery UI Themeroller

API Rules: What they came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:

  • $(”div”).draggable() creates a draggable
  • $(”div”).draggable(”destroy”) destroys it
  • $(”div”).draggable(”method”) calls another method on the plugin.

The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.

In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.

It’s always extremely important that every UI tool should come up with Stability, Debugging and Testing etc. As the team says jQuery UI v1.5 was not only feature-rich but also stable. As they took several steps to greatly improve debugging and testing including the setup of their own dedicated bugtracker with jQuery UI specific version and milestone targeting. They also invested a lot of time into new unit tests that make use of the jQuery test suite Qunit. Finally, they created jquery.simulate.js, as a plugin specifically designed to fire true browser events. This means, you can actually tell the plugin to pick up your draggable, move it to a certain position and release it again, just if you’d be talking to a real testing person.

Effects: Enter Enchant

One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.

We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!

As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.

Now you can even create your own themes with the help of ThemeRoller:

As you all know one we think about to build a better UI – first we always think about color schemes, the layout, wireframe structure, pattern etc based on the purpose of the application. So just keeping this in mind they have come up with this Theme Roller.

ThemeRoller offers a unique approach to theming UI components specifically built for jQuery UI. With ThemeRoller, you can create your very own theme for your project within minutes. It’s completely intuitive, comes wich rich controls to change the color and design of each state, and then previews your theme with the actual UI components as you work!

You now have literally millions of combinations to chose from. Any theme you create can be reached by copying the URL at any point in your progress; and after you’ve played with it enough, you can click the download button and a ZIP package is generated with the css file, the images and a demo page.

In addition, ThemeRoller also includes a theme gallery to browse for downloads and inspiration. Creating a theme for your application doesn’t get any easier than this; it’s simply that amazing.

And next comes Plugin’s:

Looks like they have made the biggest improvements and changes were done on individual plugin code. They also focused heavily on enhancing options and increasing flexibility (e.g. connecting sortables to draggables) to allow our plugins to be used in almost every environment.

Last but certainly not least, we want to give a VERY special thanks the Liferay staff, who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

Download jQuery UI v1.5:

Final Release at: http://ui.jquery.com/download

  • http://twitter.com/Designergianna gianna

    This is what now all people are going a head with….

    Here are some Most Essential Plugins for WordPress

    WP Super Cache
    Google XML Sitemaps
    Akismet
    WP-DB-Backup
    WP-PageNavi
    WordPress Automatic upgrade
    cforms II
    Broken Link Checker
    FeedBurner
    Ecommerce Website Development Ecommerce Website Developer