jQuery UI 1.8 adds position, button, autocomplete, new widget factory, lighter core

Posted on by

The jQuery UI team is thrilled to announce the final release of jQuery UI 1.8 with 5 new plugins, 1 new effect, and hundreds of bug fixes and improvements.

We’ve worked extremely hard to make jQuery UI lighter and more modular with an even more flexible and extensible core. Now it’s even easier to build your own widgets or extend ours, whether you use the jQuery UI Widget Factory, the jQuery UI CSS Framework, or both. This release is a collective effort spanning more than 9 months with contributions from hundreds of developers, designers, testers and users. We thank you for all your help and support. And we even get personal (we’ll name names!) at the end of this post.

The code, themes, demos, and documentation are now live on jqueryui.com, the jQuery UI Download Builder, ThemeRoller, and Google’s AJAX Libraries API.

Note: There are significant (and in some cases breaking) changes in this release. If you currently use or develop jQuery UI plugins be sure to consult both the Changelog and Upgrade Guide for full details on these changes and their impact.

Download jQuery UI 1.8

I want it all:

I know just what I want:

  • The jQuery UI 1.8 Download Builder creates a custom zip with only those components you select. It also takes care of plugin dependencies, so you can chill more.

I want it always:

What’s new in jQuery UI 1.8?

This release adds two new utilities, two new widgets, an upgraded widget factory and a more modular core. For a full list of all the changes between jQuery UI 1.7.2 and jQuery UI 1.8, see the 1.8 Changelog. See below for a summary of some of the larger and more visible changes.

Position utility

Position any element relative to any other, or even relative to the window or the mouse. In true “Write Less. Do More” fashion, it’s a simple as selecting the element you want and saying which part of it should be positioned relative to which part of another element. Bam.

Button widget

The button widget creates a themable button from any imaginable element you might be using as a native button. Progressive enhancement all the way. Now your <button> will look like your <input type=”submit”> will look like your <a class=”button”>. We updated jQuery UI widgets that have buttons, such as Dialog, to use the button plugin when you’ve opted to include it. Otherwise, they’ll remain native button elements. Again thanks to PE this is as unobtrusive as possible. Thanks to Filament Group for figuring out how to do this and Jörn Zaefferer for making it happen. And of course the community as a whole for providing feedback during early design/dev and later dev/testing. We’re stoked about having pretty form elements, and button is the first step.

Autocomplete widget

Now you can make any text input pop up a menu to aid the user in completing a text entry or search box, providing suggestions or allowed values. The autocomplete is designed and built based on the popular Jörn Zaefferer’s Autocomplete. As with the button widget we’ve kept the API as minimal as possible while providing the hooks necessary to customize it based on your needs. For example, you can provide static local data using the source option, or provide a callback function as the data source which can handle getting data from a server via Ajax. Single option, overloaded. This is the new way we’ll be writing and refactoring all of our widgets going forward, and we’re excited to hear what people think. It’s quite a change, but should keep the library lean while still as flexible and powerful as possible. See the Autocomplete demos for more.

This is another new plugin that owes much of the implementation work to Jörn Zaefferer, with the API design by Jörn Zaefferer, Scott González, and Richard D. Worth. Filament Group, as always comes through with interaction design and static markup and css references.

New widget factory

Scott González and Jörn Zaefferer, with help from the community, have completed a large update to the jQuery UI Widget Factory in this release. These changes make it easier to create and extend your own widget, extend our widgets, or extend widgets others create.

Note: Some of these are breaking changes, requiring an upgrade for plugins that built on the 1.7 widget factory. A summary of these changes and their impact can be found in the widget factory section of the Upgrade Guide.

For another summary of these changes and why we’re so excited by them, see this post by David Petersen. Thanks David.

jQuery UI Core 71% smaller

The latest version of the jQuery UI Core is 71% smaller. This optimization has been achieved largely by pulling the already modular but bundled components mouse and widget.

New mouse plugin file makes jQuery UI 14% smaller on average

The mouse plugin isn’t new, but this release moves it to its own file, jquery.ui.mouse.js, where before it was inside the jQuery UI Core. This means that jQuery UI plugins that don’t depend on the mouse plugin but previously included the jQuery UI Core have less unused code to include, with an average overall file size improvement of 14%. That’s just an average. Some improvements will be as high as 36%.

File renames

All the .js and .css files have been renamed to start with a jquery.ui. prefix instead of a ui. prefix. This is to be consistent with jQuery plugin naming guidelines and is in preparation for some tools in development that will allow for easily creating custom builds that include jQuery plugins as well as jQuery UI plugins.

Note: If you write your own jQuery plugin, even if it’s based on the jQuery UI Widget Factory, please follow the jQuery plugin naming guidelines “jquery.{plugin-name}.js” not “jquery.ui.{plugin-name}.js” This will make it easier to distinguish between jQuery plugins that are and are not part of the official jQuery UI library. The same goes for widget namespacing and css class namespacing, except of course when using general jQuery UI CSS Framework classes. For example, if you write a widget called foo, the file should be named jquery.foo.js, not jquery.ui.foo.js. The widget can use classes such as ui-widget, ui-widget-content, ui-state-active (see Theming Docs for a full list) but should not use css classes such as ui-foo and other ui-foo-* classnames, as these would be reserved for the foo widget in the jQuery UI library, or jQuery UI Foo widget, which would have a filename jquery.ui.foo.js.

Latest jQuery 1.4.2

jQuery UI 1.8 includes the latest release of jQuery, 1.4.2. It’s fast.

How do I upgrade?

  1. Download jQuery UI 1.8 (see links above)
  2. If you’re going from 1.7 to 1.8, be sure to follow the latest Upgrade Guide. If you’re coming from an even older version, you’ll want to follow the legacy 1.7 Upgrade Guide first.
  3. Finally, to know just how much better every piece of jQuery UI got in 1.8, you can review the Changelog in all sorts of detail. If your favorite bug isn’t fixed yet, be sure to let us know in our bug tracker or the new Developing jQuery UI Forum.

What about jQuery UI 1.7?

The release of jQuery UI 1.8 final makes it the latest stable release of jQuery UI. This makes the previous release, 1.7.2, legacy. The jQuery UI project supports the latest stable and a single legacy release concurrently. So as of now, the jQuery UI Download Builder and ThemeRoller only contain these releases. Any release older than 1.7.2 is no longer supported and all users are encouraged to upgrade to 1.8 as soon as possible.

A few issues have been identified in attempting to use legacy jQuery UI 1.7.2 with the latest jQuery 1.4.2. These versions are not compatible. The legacy jQuery UI 1.7.2 is only compatible with jQuery 1.3.2. The coming jQuery UI 1.7.3 release will bring it up to compatibility with the latest jQuery 1.4.2. This will be the final 1.7.x release, freezing this branch.

Thanks

Thanks to all who helped with this release, specifically: 3li, 4pcbr, abaumhau, aesnn, aflynt, ajpiano, akaihola, akshell, alab1001101, albertvo, alexch, allanm051, andreas, Andrew Powell, andrew.sharpe.7.9, Aneon, antonello.pasella, aron.duby, arunpjohny, ashish879, ask, attaboy, audreyt, AzaToth, babaker, BenBlank, bhornseth, bkrausz, bman654, BMCouto, bmherold, bobbykjack, bobmajdakjr, bohdan.ganicky, bornemix, Brant Burnett, brostbeef, burhan, Ca-Phun Ung, caesar2k, carltongibson, cfrerebeau, chaos, Chealer, Chi Cheng, chrisbarr, cjwilks, coeamyd, colinclark, conkey2, crankharder, crexland, cupdike, cyberdaz360, d.wachss, d3r1v3d, dantman, danw, darkprisma, david.brooks, davidascher, davidb, defenestrator, Demphest, dhlavaty, diogobaeder, DiRN, divide, dluk, dmethvin, dmfontz, dmuir, dohsun, doublerebel, dougneiner, doutu, dpeterman, dprunier, DRHansen, dtetto, duelli, dunghopper, ecaron, eib, epascarello, epiraux, erikharrison, ethan, FDisk, FelipeMorais, fgTodd, Flany, FreakCERS, geki007, george.adamson, glipman, gotmikhail, grabanski, graemeworthy, GreyCells, guile, haayman, hatapitk, idlesign, igor.morozov, Infarinato, itfische, ivanko, jabbott7, JBeckton, jdillmann, jeffgran, jollytoad, julian.jelfs, Jörn Zaefferer, kae, ke4roh, Keith Wood, kevin.wells, klarkin, Klaus Hartl, kswedberg, lisaj, lnostdal, lunchtimemama, L_K_W, m4olivei, macarthy, Maggie Costello Wachs, marcoos, margustiru, martinkeimel, Matty, mawcs, mconway, mdiaz, menteb, mesoconcepts, mg, MikaJ, mikecapp, mikehostetler, Miroku_87, mkemmerling, mkornblum, moveax, MugeSo, mulhoon, mvermilion, neilski, nikolae, NJBR, nodster, ntoniazzi, obrie, patrick, Paul Bakaus, quasipickle, qwerty, ramaboo, raszi, rbrackett, remi, rgluga, ricardolopezrey, Richard Worth, riegens, rnbguru, RobARichardson, rsyring, Rwhitbeck, sam, Sancus, sc0rchin, SCCY, Scott González, Scott Jehl, sdavis, sebbacon, Sebmaster, seph429, sgorski, shartley, sherington, shuckster, slobo, smadep, snobo, sonu27, sosensible, spiralni, stakach, StevenBlack, TaeVjQuery, tan, Tgr, th3br41n, theojapa, thetoolman, tibi7000, timolastfm, togis, tomas, triblondon, trixta, uggedal, urkle, veronica, viraj.kanwade, vmx, vrn_shan, wakamolee, wewals, whydream, wichert, wimvl, Wolfjourn, xorax, xover, yourcelf, ZaDarkSide, ZeroMD, zeta, Zidane

54 thoughts on “jQuery UI 1.8 adds position, button, autocomplete, new widget factory, lighter core

  1. Looks good, nice work. Can you guys switch over to github like jquery core? I believe you’ll get a lot more contributions and overall development will greatly improved as it has with jquery core.

  2. Pingback: jQuery UI 1.8 Released! | Fuel Your Coding

  3. Pingback: DevGrow

  4. Pingback: dalmaer at 03/23/10 11:35:29 | Exectweets

  5. Pingback: jQuery UI 1.8 has been released | Nilambar Sharma

  6. Pingback: Ajaxian » jQuery UI 1.8 comes with new plugins, effect, and fixes

  7. Pingback: jQuery UI 1.8 comes with new plugins, effect, and fixes : RefreshTheNet.com

  8. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #566

  9. Pingback: Webentwicklung: jQuery UI 1.8 erschienen – schneller, kleiner, modularer » t3n News

  10. Awesome !
    Can’t imagine what the web would be without jquery and jqueryui !
    Thanks a lot for this great work you’re all doing.

  11. Pingback: jQuery UI 1.8 hat auch ein Autocomplete | nerdpress.org

  12. Additional documentation for the autocomplete widget would be helpful, eg. how can one override the default _renderItem() method to eg add pictures or other html to each item in the dropdown list.

    Also, it seems to not support any extraParam like another jquery autocomplete plugin which we’ve been using. I’ve managed to supply some static parameters by appending the source url, but having these dynamic would be helpful.

  13. Marvelous. I’ve switched 2 sites to this release.

    I got one left but I spotted some unexpected behaviour with autocomplete: the menu box appears super-wide. Of course, that bug is probably on my side, 1.8RC3 works great though.

  14. Pingback: jQuery 1.8 « AmandaPENTON

  15. Rocky Madden on said:

    Congratulations and thank you on a job well done. Can’t wait to get this into our production environment, particularly the auto complete functionality!

  16. Wow, has the “extraParams” options *really* been removed from the AutoCompete plugin? I don’t see it in the documentation at all…..

    That would be a HUGE strike against, as that option is so incredibly useful

  17. @JQuery

    I was reallly, really hoping for a much smaller filesize.

    I ONLY use the Slider widget.

    1.7.2 was 94kb
    1.8 is 93kb

    So I’m not sure where people are getting that this is 60%-70% smaller because when I use the custom UI builder download, it only save me 1kb in size which is less than 1%.

    Am I doing something wrong?

    🙁

  18. To add more clarity

    The only reason why I use JQuery is for the Slider control.

    The filesize is massive for the use of JUST the Slider control.

    Am I doing something wrong in how I can obtain the smallest JQuery/JQueryUI+Slider filesize?

  19. Sarah H on said:

    All

    I thought 1.8 was suppose to be SMALLER in file size.

    Justing just the Slider widget, it appears 1.8 is nearly exactly the same filesize as 1.7.2.

  20. @Tim and @Sarah H – The size reduction mentioned is for the jQuery UI Core and as the blog post details this was achieved by moving the widget and mouse plugins into their own files. The slider widget is the one widget of our current set that depends on core, widget, and mouse. The other widgets depend on core and widget only, so they’ll see more filesize difference.

  21. @Stephen – the autocomplete was completely redesigned to have a minimal set of features that could be customized and extended to reach as much of the previous functionality as possible. You’ll find examples in the demos and details in the docs.

    If you still feel there are gaps after getting to know this redesign, please bring them up on the Developing jQuery UI Forum http://forum.jquery.com/developing-jquery-ui . Thanks.

  22. @Tim – how can your jquery-ui filesize be 93 kb when only using slider?
    Goto download, click deselect all components, select core, widget, mouse and slider, then download and the jquery-ui-1.8.custom.min.js is only 19,4 kb …

  23. Pingback: jQuery: » The Official jQuery Podcast – Episode 17 – jQuery UI 1.8

  24. @Richard D. Worth

    Any chance of finding a way to make *just* using the Slider widget a smaller filesize.

    I’m similar to both Tim and Sarah in that I *only* use JQuery so that I can use the Slider control.

    For only using the Slider control, it’s quite a large download for that one single task.

    Any ideas on how to improve the Slider control to make it not as heavy weight on filesize?

    Thanks!

  25. Barack Obama on said:

    I’ve written extensive drag and drop interface with jquery UI 1.7.2, but now that I’ve upgraded to jquery UI 1.8 with jquery 1.4, my jquery scripts don’t work anymore?!! Is jquery UI 1.8 not backward compatible with jquery UI 1.7.2?

  26. Pingback: The Official jQuery Podcast – Episode 17 – jQuery UI 1.8 | seo

  27. Harry on said:

    Just a suggestion. Can we include the png theme image used in the ThemeRoller page in the theme downloads?

  28. Dave on said:

    So I assume that the jQuery Dialog is not affected in terms of deciding between 1.7 and 1.8…that if I implemented my jQuery dialog in 1.7, I can simply download and replace the core library with 1.8 and the dialog will still function the same since it doesn’t look like that part of the code base changed right?