jQuery UI: Interactions and Widgets

Posted on by
Meet the jQuery UI team at jQueryCamp Boston!
We’re having a free one day conference this October and most of the jQuery, and jQuery UI, teams will be there. Come along, ask questions, and meet the people who build the library that you love!

User Interface - Green

Today we’re very pleased to announce a brand new library: jQuery UI. jQuery UI is a fully themed interaction and widget library built on top of jQuery.

You’ll be able to find everything that you need to know about jQuery UI on it’s site:
http://ui.jquery.com/

jQuery UI signals the start of a whole new branch of the jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications. Frequently, these components are coming directly to you from traditional jQuery plugins, but with strict coding, documentation, themeing, and demo standards. We hope you’ll enjoy this new level of quality as much as we do.

We’re launching with one complete theme: Flora (designed by Tom) and two partially-complete themes: Light and Dark (by Sean). Within the next week we’re going to be announcing the details of a new theming competition, along with everything that you need to completely build your own jQuery UI theme.

Note: jQuery UI requires that you use, at least, jQuery 1.2.1 or newer.

Please be kind, there’s still going to be a mess of rough edges, as is to be expected with a brand new project. Please submit bugs to the bug tracker under the “UI” component and bring them up for discussion on the jQuery UI Mailing List. We appreciate your help.

Without further ado, here’s jQuery UI!

Demo App: Advanced Image Gallery

(Currently has issues in IE and Safari – we’re working on some fixes which should be up later today.)

Demo App: Bar Chart Navigation

(Currently only works in browsers that have Canvas support: Firefox, Safari, and Opera.)

Features: Mouse Interaction

Draggables (Docs)

Droppables (Docs)

Sortables (Docs)

Selectables (Docs)

Resizables (Docs)

Features: Widgets

Accordion (Docs)

Calendar (Docs)

Dialog (Docs)

Slider (Docs)

Tablesorter (Docs)

Tabs (Docs)

Features: Effects

Magnifier (Docs)

Shadow (Docs)

Contributors

This is the result of many months of work by over a dozen people – many of whom were first time contributors to jQuery.

For now, here’s a rough list of everyone who helped, and what they helped with. (Please let me know if I forgot anyone!)

  • Paul B (Draggables, Droppables, Sortables, Resizables, Slider, Shadow, Magnifier, Gallery App)
  • John (Documentation, Theming, Demos, UI Site, Cat Herding)
  • Richard (Tree, Selectables, Sortables, Dialog, many bug fixes)
  • Tom (Flora theme, UI Site, and UI logo)
  • Sean (Theming, Dark and Light themes, Shadow, Forms)
  • Klaus (Tabs)
  • Joern (Accordion)
  • Christian (Tablesorter)
  • Adel (Downloader, Client-Side)
  • Paul H (Downloader, Server-Side)
  • Marc (Calendar)

With additional help from: Tane, Micheil, Gilles, Dmitri, and Yehuda. Much of their work will be seen in the next release of jQuery UI (including menus, toolbars, uploaders, splitters, and rich text editors).

I’d like to do a more-detailed write up of what everyone put into this project to thank everyone individually, as everyone did a really fantastic job of pulling together and making this happen. Paul, Tom, Richard, and Sean, especially – you guys did a superb job!

Once again, I hope everyone enjoys this new work – please be kind, it’s still got some very rough edges, so to speak. If you spot any bugs, please post them to the bug tracker under the “UI” component.

As always, feedback is appreciated! If you’d like to let us know what you think, please post to the jQuery UI Mailing List, or hop on irc.freenode.net #jquery-ui, as those are the best place to be able to find us.

Enjoy!

If you like what you see, feel free to give it a digg.

43 thoughts on “jQuery UI: Interactions and Widgets”

  2. John Resig on said:

    @dito72: In some ways, it could be considered comparable to Scriptaculous, correct. Although, it currently doesn’t tackle the numerous animation techniques that Scriptaculous encompasses. I’d imagine that we’d see that in the form of a plugin, at some point, for jQuery.

  3. Romz on said:

    Unbelievable, I’m still voiceless in front of the crazy work you did (and will do).

    A lot of congratulation from Belgium ;-)

  11. viper on said:

    resizables (modal and text area) have poor performance in IE.
    Gallery does not work properly in IE6.

  12. David G. Paul on said:

    Very good work.

    Especially good work on the sortables. Every other framework I’ve ever tried has given problems when using sortables with a float inside a scrollable div – but so far it’s working great (in FF2/win)!

    Keep up the good work ;)

  13. Jason on said:

    Looking forward to some more info about their options in docs. I assume it’s pretty much the same as the interface sortables though.

  15. Stuart on said:

    Well if this is as good as it looks then that’s swung it for me. I’ve been swaying between YUI and jQuery, with the range of YUI widgets in their favour, and jQuerys size and syntax going for it. I’m guessing there is a fair bit of interface behind this, which is great as that was fairly mature code. I like the selectable download options, allowing the size of the final code to remain small. Well done guys.

  16. ziggy on said:

    Nice effects, great to see.

    The design/colors are not so nice for standard gui elements. The tabs look awful. I don’t care for the little resizable indicators either. I know the design is up to the user, but the default demos could be a neutral Windows business look for those items, then let people skin them as they want if looking for something different.

    Little notes:

    -the top draggable gets lost under the lower section examples.
    -The droppables are not clear; one works, one doesn’t on the 1st 2 examples.
    -how to deselect selectables?
    -why use images on the accordion?
    -accordion has 2 blank demos inserted

  18. Slim Jim on said:

    Just wanted to say thanks! Still the best of the best.

    I also wanted to let you know that there is a bug in the sortable demo with nested lists. If you move a child node to become a parent, then move that same node back to it’s child status, and then select the parent node of the child node you will notice that as you move the whole group the child node is ghosted as you move along. Hopefully that is clear as mud.

    Keep up the great work!

  22. Zach Leatherman on said:

    Is anyone else having a problem with the Plugin Style download? I check all the boxes and it gives me back a minimized file, but in my first tests it doesn’t actually contain any of the calendar code or the tablesorter code?

    Maybe I have a case of the Mondays.

  23. John Resig on said:

    @Zach: We’re having issues with including those two files, at the moment – we’re working to resolve it. (They’re slightly different as they’re normal jQuery plugins.)

  25. Wade Harrell on said:

    Looking good, getting in the ballpark of ext which always gets my clients drooling until they see the support and other fees.

    I do notice a few “does not work in browser X” warnings which is a little bothersome. I am pretty sure John once said (I forget if this was in a video or blog) that if something does not work in a given major browser then it does not work.

    I think this is more an issue of trust than anything. I would like to show the demos to some people but if they see those warnings they will never trust jQuery, particularly when there are some Flex developers bragging at their other ear about how they work the same in all browsers (not 100% true, but whatever).

    Just my 2 cents, but I would rather see a smaller set of features working flawlessly in all environments than a truck load of features that only work in some instances.

  27. Richard Tallent on said:

    Nice work! I’m sticking with ExtJS for now for the UI (anyone know if it is working with JQuery 1.2.1 BTW?), but it is nice to know there is another option for sites where I don’t need that “native app feel.”

  29. Krystian on said:

    Would be great if same tooltip plugin as in old interface.eyecon would be included in this UI
    I tried different tooltip plugins but only this one was simple and works good with dynamic title changes.

  31. Greg on said:

    This is great stuff, fun stuff … will be eager to watch it mature. But I’m glad to see it’s a separate download and I hope it stays like that.

    Just please keep this stuff separate from the jQuery core. 4 months ago this designer/developer didn’t care to bother with jquery and javascript/ajax ‘tricks’ for sheer usability/dev time reasons … now i can’t develop w/o it . Designing for browsers was, is, and will always be a waste of time for all but large budgets. Jquery’s extremely efficient size/speed/convenience/dependability/stability are why i use it daily.

    I for one am happy jquery isn’t like EXT … with it’s file size issue and memory bloat. But this is cool stuff.

    You guys make it too easy for anyone to develop kick ass sites, quit it already!

  34. Pingback: Bram.us » jQuery UI

  40. LVB on said:

    This is promising but from what I’ve been able to test, I believe this should have been called a beta (or an alpha ?) rather than a 1.0 release. There are still plenty of bugs, even in the demo featured on the official web page.

    Looking forward for the next release, I hope the UI modules will reach core’s overall quality very soon. I’m eager to benefit the power of jQuery 1.2.1 in using UI widgets.

  41. Devin on said:

    This is amazing! What a pity it wasn’t done before I finished my major web project. Finishing my 9 month systems development project for my honours degree and handin is 5 days away. Will definately use it in the future!! Well done again.

    Cheers

    Devin

  42. Alexandre Magno on said:

    jQuery is a simple fantastic, powerful and a complete javascript framework. Im adopting in all my projects… but now, in a first bigger project, using ajax and a lot of form integration, I see that with jQuery we can make all we want, we can just aply with wisdow. Congratulations for the jQuery team, Ray Bango and company and I would make the possible to spread this framework on south america…. thanks…