Blog » jQuery UI: Interactions and Widgets
Posted September 17th, 2007 by John ResigWe’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!
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
Features: Widgets
Features: Effects
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.
September 17th, 2007 at 2:04 am
[…] finally we made it. jquery ui, a fully themed interaction and widget library built on top of jQuery, is here for you to serve. feel free to say what yout think. […]
September 17th, 2007 at 2:05 am
Very nice
, I have no experience with this sort of libs. Is this comparable to scriptaculous??
September 17th, 2007 at 2:10 am
@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.
September 17th, 2007 at 2:27 am
Unbelievable, I’m still voiceless in front of the crazy work you did (and will do).
A lot of congratulation from Belgium
September 17th, 2007 at 2:43 am
Just curious… how does this relate to interface?
September 17th, 2007 at 3:19 am
What happened to a Sunday release heh
September 17th, 2007 at 3:21 am
Hi!
What a great news! I habeen waiting for that and now - here you are
.
September 17th, 2007 at 3:23 am
Sortable doesn’t seem to work very well in Safari 2.0.4. Fine in FF 2.0.
September 17th, 2007 at 3:27 am
Congratulations to the Jquery team for another milestone !!
Thanks for all your work to make our lives easier
September 17th, 2007 at 3:35 am
[…] John Resig über jQuery UI Beitrag hinzufügen bei: […]
September 17th, 2007 at 3:46 am
So many bugs in Safari 2.0.4
September 17th, 2007 at 3:52 am
[…] Yes, JQuery 1.2 is out. If examples around the web and our previous coverage didn’t entice you enough, this one should: […]
September 17th, 2007 at 4:11 am
Advanced Image Gallery & Sliders doesnt work;
Tabs have visual bugs;
Opera 9.20
WinXP SP2
September 17th, 2007 at 4:16 am
resizables (modal and text area) have poor performance in IE.
Gallery does not work properly in IE6.
September 17th, 2007 at 4:35 am
[…] Esta semana llevamos una buena tanda de posts sobre jQuery y sus recientes nuevas versiones, pero no es para menos. Ahora, lo último, es un conjunto de aplicaciones a modo de demos, para ver su potencial y mostrarnos, a los usuarios, las posibilidades de este gran framework. […]
September 17th, 2007 at 4:51 am
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
September 17th, 2007 at 5:00 am
Looking forward to some more info about their options in docs. I assume it’s pretty much the same as the interface sortables though.
September 17th, 2007 at 5:40 am
[…] Die Entwickler weisen darauf hin, dass jQuery UI derzeit noch einige Fehler beinhaltet, sie versprechen jedoch dem hohen Standard von jQuery treu zu bleiben und die Fehler schnellst möglichst, mit Hilfe der Community, auszumerzen. […]
September 17th, 2007 at 5:48 am
Amazing work guys! Looking forward to future UI releases.
September 17th, 2007 at 6:04 am
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.
September 17th, 2007 at 6:21 am
[…] jQuery UI: Interactions and Widgets (tags: uncategorized) […]
September 17th, 2007 at 6:36 am
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
September 17th, 2007 at 7:00 am
[…] 另外一個消息是 jQuery UI：jQuery UI: Interactions and Widgets，這代表 jQuery 也開始做 UI 的部份了，在 ericsk 的 jQuery UI 問世 這邊有提到一些，另外在網站上也有一些 sample html 可以玩。 […]
September 17th, 2007 at 7:09 am
Next step: support ARIA !
=> http://developer.mozilla.org/en/docs/ARIA:_Accessible_Rich_Internet_Applications
September 17th, 2007 at 7:22 am
[…] Llega jQuery UI, una colección de componentes reusables y de alta calidad: jQuery UI: Interactions and Widgets. […]
September 17th, 2007 at 8:47 am
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!
September 17th, 2007 at 8:51 am
jQuery 如期发布了其UI组件框架1.0版本，基于jQuery框架强大的功能（jQuery’s API is deceptively simple, it is consistent across browsers, well documented, it supports many features developers have come to expect of a library, it has a compelling plugin architecture making jQuery extensible in a future-proof manner, and it has an active development cycle and community.），相信jQuery UI应该有很好的前途。
从架构上来看，jQuery UI仍然沿用jQuery的plugin框架机制，这对于保持jQuery架构的稳定性和扩展性是至关重要的，相比较而言，Scriptaculous之于prototype在架构的一致性和延续性上稍显凌乱，从这一层面来说，prototype只能称之为javascript library。
1、jQuery UI的定位：
jQuery UI is a fully themed interaction and widget library built on top of jQuery.
jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications.
September 17th, 2007 at 10:07 am
Congratulations JUI team. Very well done!
September 17th, 2007 at 11:17 am
Congrats John and team on this ambitious project. I can’t wait to check out the source and start putting it through its paces. By the way, the design on http://ui.jquery.com looks great too.
September 17th, 2007 at 11:18 am
The gallery does not work properly in Safari 3 on mac. Bugs aside, keep up the amazing work!
September 17th, 2007 at 11:32 am
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.
September 17th, 2007 at 11:41 am
@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.)
September 17th, 2007 at 12:04 pm
Very cool stuff! Keep up the great work.
September 17th, 2007 at 1:13 pm
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.
September 17th, 2007 at 2:13 pm
The demo isn’t working but I guess you already know that.
September 17th, 2007 at 3:13 pm
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.”
September 17th, 2007 at 3:25 pm
[…] jQuery: » jQuery UI: Interactions and Widgets jQuery UI is a fully themed interaction and widget library built on top of jQuery. (tags: javascript jquery plugins widgets framework library ui interface theming) […]
September 17th, 2007 at 5:35 pm
Jquery rocks! I use it daily! Keep up the good work!
September 18th, 2007 at 3:43 am
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.
September 18th, 2007 at 4:24 am
[…] Sunday evening, the all new side of jQuery, jQuery UI has been released to the public. It features a hole bunch full themed ready-to-use interface components as well as many core interaction modules like draggables or resizables. This has been the one thing jQuery didn’t have for a long time when compared to other libraries like YUI or Dojo. […]
September 18th, 2007 at 8:59 am
真是太棒了.
September 18th, 2007 at 9:01 am
酷!!!!!!
全世界的Jquery爱好者在这一天欢呼!
September 18th, 2007 at 9:02 am
Great work guys, thanks a lot!!!
September 18th, 2007 at 9:03 am
实用。简洁
September 18th, 2007 at 9:04 am
来至QQ群112071我朋友
再次留言,希望中国的JQ爱好者加入.
September 18th, 2007 at 9:05 am
来至 QQ群 112071 的朋友
再次留言,希望中国的JQ爱好者加入.
September 18th, 2007 at 9:05 am
WEB交互体验 QQ 聊天群：112071
September 18th, 2007 at 9:06 am
qq群:112071
激动人心的一刻
September 18th, 2007 at 4:11 pm
nice. but unfortunately the demos are very slow, Interface is much faster.
September 18th, 2007 at 4:15 pm
[…] Following a very successful release of jQuery v1.2, the jQuery team has just announced the release of their new UI & effects library, jQuery UI. 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. […]
September 18th, 2007 at 8:01 pm
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!
September 18th, 2007 at 9:17 pm
it rocks! i like the table sorter and the magnifier the most! keep up the great work!
September 19th, 2007 at 12:59 am
wow!!! I don’t want to say so ,but i cann’t say so.
Well done , grandeur work!
A congratulation to all people of the work from CHINA!
September 19th, 2007 at 2:01 am
I wrote up a small review here… congrats on the release regardless.
http://waynepan.com/2007/09/19/5-reasons-to-use-jquery-ui-and-3-reasons-to-avoid-it/
September 19th, 2007 at 3:55 am
Sortables and Selectables dont works on FF2 on the mac…
but is a great work, thanks
September 19th, 2007 at 11:58 am
[…] jQuery UI is a fully themed interaction and widget library built on top of jQuery (more info here) Spread the word! […]
September 20th, 2007 at 12:47 pm
I updated Wayne on the truth of the calendar which is that it isn’t missing the functionality he is referring to.
September 20th, 2007 at 1:44 pm
[…] Nu este însă obligatoriu ca o aplicaţie veche să nu meargă că jQuery 1.2.1. Vă amintiţi de exemplul pentru Edit in Place scris în luna august? L-am testat cu noul script şi merge la fel de bine. Scopul acestui material nu este să prezinte în detaliu noutăţile versiunii curente (aveţi un link spre pagina unde sunt acestea prezentate, în engleză desigur). Am semnalat apariţia unei noi versiuni şi acum aş trece mai departe la o noutate ce poate fi calificată extraordinară. Până acum, pentru efecte mai speciale în pagină, am folosit librăria Interface Elements from jQuery, al cărui dezvoltator principal este un român (Ştefan Petre). Într-o pagină care probabil acum nu mai există, librăria Interface era prezentat ca o librărie oficială sau semi-oficială jQuery (nu mai reţin). Se pare însă că jQuery a ales să aibă acum o librărie similară integrată în sit, cât se poate de oficială, intitulată jQuery User Interface. John Resig o anunţa cu mare bucurie luni şi este greu să nu îi împărtăşeşti bucuria. […]
September 20th, 2007 at 5:42 pm
[…] картинки и демки […]
September 21st, 2007 at 4:31 pm
yay UI time!
September 22nd, 2007 at 8:55 am
Great news indeed. Although it was bit buggy when I tried demos from svn earlier.
September 23rd, 2007 at 2:14 pm
Sortable doesn’t work under FF 2.0.0.7 (FireBug show non-stopable error-list), IE 6.
Under FF - list view like something broken, under IE - some node suddenly disappear…
Screenshot under FF - http://farm2.static.flickr.com/1417/1429468884_5574e14649.jpg?v=0
;(
BTW - great job!
September 24th, 2007 at 3:14 am
[…] Vor kurzem wurde die erste Version von jQuery UI (user interface) veröffentlicht. Die JavaScript Bibliothek vereint Interaktionen, Animationen sowie kleinere Widgets in einer Sammlung. Hier gibt es eine kleine Sammlung von Anwendungsbeispielen. […]
September 25th, 2007 at 11:28 am
This Rocks!
I love jQuery, then I love jQuery UI….
Great Job…
Saludos desde México.
September 26th, 2007 at 1:16 pm
Superb!
Thanks jQuery Team
Keep it coming!
September 26th, 2007 at 11:36 pm
For those asking about the connection with Interface, notice that the first name in the credits is Paul B - AKA Paul Bakaus. Paul is sort of the #2 guy (if I read the page correctly) at the Interface site.
References:
http://interface.eyecon.ro/news
http://www.paulbakaus.com/
September 27th, 2007 at 1:44 am
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.
September 28th, 2007 at 12:11 pm
[…] Yay, on Sept 16, 2007 jQuery UI 1.0 was released! […]
September 29th, 2007 at 4:25 am
[…] Dopo aver pubblicato il precedente post (in draft da oltre un mese) sono andato per curiosit sul blog di jQuery. La scorsa settimana hanno rilasciato la versione 1.2 del framework, ma questo non tutto. Infatti, finalmente, il pacchetto User Interface ha visto la luce. […]
September 29th, 2007 at 12:04 pm
[…] Attese da molti sviluppatori web sono state finalmente rilasciate le User Interface per jQuery, noto framework js famoso per la sua leggerezza ed espandibilità. […]
October 1st, 2007 at 2:21 pm
[…] jQuery: » jQuery UI: Interactions and Widgets […]
October 2nd, 2007 at 5:47 pm
Opera 9.1 … Большенство эфектов не сработало! =(
October 4th, 2007 at 2:56 pm
[…] Also part of the project is jQuery UI (User Interface), a library of components built on jQuery. jQuery UI is composed of a lot of the fun elements associated with Web 2.0, such as drag-and-drop features and widgets. […]
October 5th, 2007 at 3:02 pm
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
October 11th, 2007 at 7:48 pm
thanks,looks well.
October 18th, 2007 at 8:27 am
Very nice, but modal box with iframe is lag while drag. Should hide iframe on drag.
October 18th, 2007 at 7:45 pm
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…
October 23rd, 2007 at 6:46 am
[…] Being a part of the jQuery UI project, UI Tabs aka Tabs 3 has been released the other day. […]
October 23rd, 2007 at 11:31 am
Some of the demos, specifically Resizable, Magnifier, Slider and Shadow, do not work in my Firefox (2.0.0.8, Windows). Also, the link to Advanced Image Gallery leads to a 404.
But what works, works. Keep up the good work.
October 24th, 2007 at 1:31 am
Why are there so many issues with IE7? As much as everyone hates MS surely it makes sense to make it workable on the most popular platform.
October 28th, 2007 at 2:20 am
we waiting for a fully working on ie6/7. The sortables, for example, have weird behavior on ie6. Until few days ago, sortable didn’t work even on firefox…
October 30th, 2007 at 1:31 am
Great job !
Did you think that on the next version you can add native support of ARIA spec like Dojo do for example.
http://www.w3.org/TR/aria-roadmap/
http://www.w3.org/TR/aria-role/
http://www.w3.org/TR/aria-state/
http://developer.mozilla.org/en/docs/Accessible_DHTML
ARIA is already supported by Firevox, last version of Jaws and window eyes 5.5. Furthermore Firefox 3 and Opera 9.5 will have native support of it too ( this way people wouldn’t have to use a separate js to use it in html )
November 3rd, 2007 at 8:03 am
Anyone knows, if I can get an array of elements sorted with sortable script. Is this posible?
tnx!
November 4th, 2007 at 5:49 am
Awesome! jQuery just keeps getting better!
November 6th, 2007 at 3:12 am
[…] Dopo aver pubblicato il precedente post (in draft da oltre un mese) sono andato per curiosità sul blog di jQuery. La scorsa settimana hanno rilasciato la versione 1.2 del framework, ma questo non è tutto. Infatti, finalmente, il pacchetto User Interface ha visto la luce. […]
November 7th, 2007 at 2:51 am
jquery-ui is so nice! thx for all of developers of jquery,
now i have a problem , when i use a resizable effect,i can not use “grid” options to make it be resized by grid…
someone who can help me ?
November 13th, 2007 at 1:51 am
Is there more examples of dialog widget?
November 21st, 2007 at 3:35 am
so cool,so good!
November 29th, 2007 at 4:11 pm
The links have all gone 404. Is there a new base URL?
November 30th, 2007 at 3:25 pm
Looks good. The last shadow demo, with the draggable/resizable picture… says it works in FF but not IE.
For me in FF 2.0.0.10/WinXP the resize and drag work… but the shadow stays the same. Shouldn’t the shadow also be refreshed to match the shape and position of the box it’s attached to?
December 7th, 2007 at 8:40 pm
I feel so ugly of the Calendar ,I design a Calendar ,
see the demo : http://www.holygrace.cn/project/calendar.htm
January 17th, 2008 at 6:16 pm
when will be a fixed version of gallery advance available? i like it
January 21st, 2008 at 4:17 am
is there tabs implementation without background images. This is making its implementation very limited in size. The best idea is to implement tabs without images like other libraries do.
Klaus may have his view on this.
February 3rd, 2008 at 1:46 am
[…] Visit Original: jQuery UI: Interactions and Widgets 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! […]
February 7th, 2008 at 11:40 am
FYI, your download JQuery UI “plugins” dialog is broken. Nothing happens when the download button is clicked (after checking the desired plugins).
I’ve tried in IE, FireFox and Safari on two XP boxes. Nothing. The “themes” and “everything” tabs seem to work just fine.
February 15th, 2008 at 2:04 am
this quite good ui and can be used on creating OS using ajax of course Jquery
February 26th, 2008 at 6:25 pm
Hi, my name is Krzysztof London. 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).
April 11th, 2008 at 4:13 am
[…] http://jquery.com/blog/2007/09/17/jquery-ui-interactions-and-widgets/ […]
May 20th, 2008 at 1:23 am
migs ycvsantkm rfciozuah odkpewn pzhfsa eslbuwf qhxy
May 26th, 2008 at 10:12 am
. .