jQuery UI 1.9 Milestone 4 – Accordion Redesign

Posted on by

The fourth milestone release for jQuery UI 1.9 is out, featuring the updated Accordion widget. This release also includes updates and bug fixes to existing and new widgets that will not make it into a 1.8.x release.

What’s a Milestone Release?

A milestone release makes it easier to try out the latest development code of jQuery UI without necessarily having to check out code from GitHub.

With a milestone release you can try out new widgets that are pretty far along (though not yet final) and provide feedback based on released code with a specific version number.

Note: the API is subject to change as the code is still under active development.

Accordion

The Accordion API has been redesigned for simplicity, extensibility and consistency with other widgets in jQuery UI. We’d love to get feedback on any compatibility issues you may have with existing code. Everything supported in 1.8 should work out-of-the-box in 1.9; if something breaks, we will work to fix it before the final release.

jQuery.uiBackCompat

As mentioned above, 1.9 will support the 1.8 API, as well as the redesigned API. However, this introduces two problems. First, some of the APIs don’t overlap cleanly. For example, in 1.8 you can collapse an accordion by setting the active option to false or -1; but with the API updates, you can set the active option to a negative number in order to activate a panel starting from the last panel instead of the first (similar to .eq()). Second, while both APIs are supported, it’s hard to test whether you’ve successfully updated all of your code for compatibility with the 2.0 release which will not support the 1.8 API. In order to deal with these issues, we’ve introduced a flag, jQuery.uiBackCompat, which can be used to prevent the backward compatibility layer from executing. This flag must be set after jQuery is loaded, but before jQuery UI is loaded. Toggling the flag after jQuery UI has been loaded will have no effect.

Download

You can download the jQuery UI 1.9 Milestone 4 – Accordion Redesign release as a zip file or via git:

File Downloads

Git

How to Provide Feedback

wiki page

To help with the testing of the Accordion redesign, visit the Accordion page on our Development & Planning wiki.

forum

If the comments section on the wiki page doesn’t provide enough room for your feedback, post to the Developing jQuery UI Forum and tag the post:

How to Contribute Code

If you have code changes for the Accordion, fork jQuery UI on GitHub and submit a pull request.

If you’re new to git or GitHub, see our guide: How to submit a fix to jQuery UI – The Easy Way.

Comments

Note: please do NOT use the comments section of this blog post for feedback on the Accordion widget. This discussion should occur on the wiki page and the forum (see How to Provide Feedback, above).

If you have feedback on us doing our fourth milestone release, feel free to leave a comment below. Thank you.

Unleash The Grid

Posted on by

The jQuery UI Team is proud to announce that we are building a rich, fast grid widget that will enhance an HTML table with data linking, sorting, paging, filtering, row selection, and inline editing. As part of this process, we’ll be building the features of the grid as standalone widgets and revisiting existing jQuery UI components. At the end of this process, not only will we have a grid, but also a better-tested, more feature-complete user interface library.

Current Progress

We are nearing completion of development on Stage 1 of the project, which encompasses the creation of a generic data model, data type parsing, and markup. This stage will culminate in a “zero feature grid,” an enhanced HTML table that supports the jQuery UI CSS Framework and serves as a base for other grid features. See the roadmap for details on work planned for future stages.

Development Approach

There are already a number of high quality jQuery grid plugins. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We are studying and applying practices and techniques from today’s most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few that have not been updated in a while, like Tablesorter, Flexigrid, and Ingrid. We invite all authors and users of these and any other grid plugins to get involved in the design of the jQuery UI Grid.

Not Invented Here?

As you may imagine, we’re pretty big fans of the jQuery UI API. We believe that having a consistent interface to complex plugins is a big win for users. Sometimes in the past, we’ve adapted already-complete plugins. Unfortunately, this approach can lead to headaches related to legacy bugs, inconsistencies with the rest of our API, and lack of familiarity with the original design decisions. By building from the ground up, we can ensure that each line of code has been vetted and that any grid we call “jQuery UI’s” conforms to our standards.

More Than Just A Grid

We’re not just developing a grid, but rather designing and building modular and extensible components, like sorting, paging, filtering, and in-place editing, that can be combined into a grid. We’re confident that jQuery UI users will find compelling and creative uses for the new suite of tools that are being built to support the grid.

Refactoring Interactions

While jQuery UI’s mouse interaction plugins work well enough in many cases, we are well aware that they have lingering shortcomings – including their ability to work properly on tables. As part of the Grid development, we’ll be giving the interaction plugins a long-awaited refactoring to simplify their APIs, address edge cases, and generally ensure their suitability for a wider variety of contexts.

Join Us!

Do you want to help design and build the jQuery UI Grid? Share your feedback? Join us on the grid planning wiki page. You can stay up-to-date with development and test the latest iterations on jQuery UI’s grid branch.

Sponsors

This work is made possible by the generous donations by individuals as well as corporate sponsors. These sponsors have donated financial and development resources to ensure the grid work can go forward over the next 5-6 months.

In particular, the jQuery project would like to thank the following sponsors (as of today) of the jQuery UI Grid project:

Double Platinum Grid Sponsors

  • Microsoft – The Microsoft Web Platform and Tools team builds many technologies for developing web sites including ASP.NET, ASP.NET MVC, IIS, Visual Web Developer and Web Matrix.
  • Adobe – Adobe Systems Incorporated offers business, creative, and mobile software solutions that revolutionize how the world engages with ideas and information.
  • Platinum Grid Sponsor

  • Wijmo – Wijmo is a complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5 that, when combined, become an unstoppable force on the web.

If you or your company is interested in being a sponsor of the jQuery UI Grid, please get in touch.

jQuery UI 1.8.9

Posted on by

The ninth maintenance release for jQuery UI 1.8 is out. This update brings bug fixes for Accordion, Datepicker, Draggable, Sortable and Tabs. For the full list of changes, see the changelog. You can download it here:

Download

File Downloads

Svn (contains final files as they are in the zip, with @VERSION replaced with 1.8.9, all themes)

Git (contains pre-build files, with @VERSION not yet replaced with 1.8.9, base theme only)

Google Ajax Libraries API (CDN)

Microsoft Ajax CDN (CDN)

Custom Download Builder

New Features

Datepicker

The datepicker widget now has support for the Algerian Arabic, Australian and New Zealand localizations.

Changelog

See the 1.8.9 Upgrade Guide for a list of changes that may affect you when upgrading from 1.8.8. For full details on what’s included in this release see the 1.8.9 Changelog.

Thanks

Thanks to all who helped with this release, specifically: Campbell, cherif, Christoph Burgdorf, Ivan Peters, jorrit, marcos.sousa, Scott González, tobias.istvan.

Comments

Note: please do NOT use the comments section of this blog post for reporting bugs. Bug reports should be filed in the jQuery UI Bug Tracker and support questions should be posted on the jQuery Forum.

If you have feedback on us doing our ninth maintenance release for jQuery UI 1.8, feel free to leave a comment below. Thank you.

jQuery UI 1.8.8

Posted on by

The eighth maintenance release for jQuery UI 1.8 is out. This update brings bug fixes for Position, Accordion, Autocomplete, Button, Datepicker, Dialog, and Effects. For the full list of changes, see the changelog. You can download it here:

Download

File Downloads

Svn (contains final files as they are in the zip, with @VERSION replaced with 1.8.8, all themes)

Git (contains pre-build files, with @VERSION not yet replaced with 1.8.8, base theme only)

Google Ajax Libraries API (CDN)

Microsoft Ajax CDN (CDN)

Custom Download Builder

New Features

Datepicker

The datepicker widget now has support for the Malayalam localization.

Changelog

See the 1.8.8 Upgrade Guide for a list of changes that may affect you when upgrading from 1.8.7. For full details on what’s included in this release see the 1.8.8 Changelog.

Thanks

Thanks to all who helped with this release, specifically: aaronpeterson, Alex Dovenmuehle, calvin, chyi1235, Corkup, danlash, draenor, hypnotoad, ji1337, Kevin Dalman, m4olivei, Mario Visic, mjpowersjr, Saji, Scott González, Tony Ross, urkle.

Comments

Note: please do NOT use the comments section of this blog post for reporting bugs. Bug reports should be filed in the jQuery UI Bug Tracker and support questions should be posted on the jQuery Forum.

If you have feedback on us doing our eighth maintenance release for jQuery UI 1.8, feel free to leave a comment below. Thank you.

jQuery UI 1.8.7

Posted on by

The seventh maintenance release for jQuery UI 1.8 is out. Along with official support for jQuery 1.4.4, this update brings bug fixes and enhancements for the Position, Draggable, Sortable, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs and Effects. For the full list of changes, see the changelog. You can download it here:

Download

File Downloads

Svn (contains final files as they are in the zip, with @VERSION replaced with 1.8.7, all themes)

Git (contains pre-build files, with @VERSION not yet replaced with 1.8.7, base theme only)

Google Ajax Libraries API (CDN)

Custom Download Builder

New Features

In this release, we’ve added support for jQuery 1.4.4.

Button

The buttonset widget now supports an items option to define which elements to convert to buttons.

Datepicker

The datepicker widget now has support for the Rhaeto-Romanic localization.

Progressbar

For the second release in a row, the progressbar widget has received an update! You can now specify a max value via the new max option.

Changelog

See the 1.8.7 Upgrade Guide for a list of changes that may affect you when upgrading from 1.8.6. For full details on what’s included in this release see the 1.8.7 Changelog.

Thanks

Thanks to all who helped with this release, specifically: 1730wang, AccessDenied, Alex Dovenmuehle, amodlin, andrew_, anonymous, awgy, azran1981, c_schmitz, dalexandre, dblood, DoctorArnar, doerwalter, dsargent, fetchak, fracmak, gethinw, ghusta, goldy, guoicq, Heiko Henning, imefisto, InAme, inukshuk, israelrios, J. Ryan Stinnett, james.a.rosen@gmail.com, jamiejag, jao, Jay Merrifield, jazzido, Jean-Francois Remy, Jeff Roush, jeffsmith, jessicah, joern.zaefferer, jryans, juergen.furrer, jzaefferer, k.robinson, kbwood, kevin.wells.iq4bis, Khaled AlHourani, Kyle Wilkinson, kzamir, mal, Marian Rudzynski, mayoulti, mbarkhau, michael.heuberger, mlooise, nmb.ten, perlpunk, pheiberg, Phillip Barnes, poplix, rambat, rdworth, rlandrum, Ronin, rosieks, Rwhitbeck, Sachemo7, saks, saksmlz, Scott González, seb835, sixhead, skeetergraphics, Stéphane Raimbault, sz_zoly7, tedclarkjr, TheBlaze, tombigel, vosechu, Wallbanger, WanderingZombie.

Comments

Note: please do NOT use the comments section of this blog post for reporting bugs. Bug reports should be filed in the jQuery UI Bug Tracker and support questions should be posted on the jQuery Forum.

If you have feedback on us doing our seventh maintenance release for jQuery UI 1.8, feel free to leave a comment below. Thank you.

Position API Redesign

Posted on by

Continuing with the API redesign, we have some changes planned for the Position utility.

API Redesign

Merge offset option into the my and at options
The offset option will be removed in favor of including the offset as part of the my or at options.
For example, while you would currently do:

$( "#elem" ).position({
    my: "left top",
    at: "left top",
    of: "#otherElem",
    offset: "50 20"
});

You would now do:

$( "#elem" ).position({
    my: "left+50 top+20",
    at: "left top",
    of: "#otherElem"
});

Regardless of whether you include the offset in the my or at option, the offset will always adjust based on the final position, just like the offset option currently does. We also plan on supporting percentages, so you can offset the element based on a percent of its width or height. If you specify a percentage in the my option, then the percentage will be based on the size of the element being positioned. If you specify a percentage in the at option, then the percentage will be based on the size of the element being positioned against.
For example, to place an element 1/4 of the way down the screen and horizontally centered, you could do:

$( "#elem" ).position({
    my: "center top",
    at: "center top+25%",
    of: window
});

And to position an element so that only the left 10% of it is visible, you could do:

$( "#elem" ).position({
    my: "left-10% center",
    at: "right center",
    of: window
});

Better collision handling
Currently the collision handling is fairly simple. If you enable collision (by specifying fit or flip) then the plugin will detect if there is a collision and if there is, it will move the element accordingly. However, depending on the size of the element, this adjustment may actually cause even less of the element to be visible. We plan on making the collision handling smarter so that it will never make the positioning worse. There will be no change in the API, just better handling for collisions.

Feedback

We’d love to hear your feedback on these changes. We want to make sure we address any issues the community may have before we finalize and implement these changes. If you have any feedback, please post it on the related forum post. Thanks.

Progressbar API Redesign

Posted on by

As previously stated, jQuery UI is undergoing an API redesign which will slim down the size of the API in order to provide a more stable codebase that is easier to learn and use. This post lists out the details of the proposed changes for the Progressbar widget along with the reasoning behind each change.

API Redesign

Add support for indeterminate progress bars.
We had previously said that indeterminate progress bars should be a separate widget. However, there is a common enough use case where you may want to start providing feedback about that a task has started before you know the actual progress. In this case you may want to start with an indeterminate progress bar and switch to a determinate progress bar as soon as you have enough information to provide details. In order to support this, we will allow the value option to be set to false to indicate that the progress bar should be indeterminate.

Switching from an indeterminate state to a determinate state would look like this:

$( "#progressbar" ).progressbar({
    value: false
});

// later when you find out more information
$( "#progressbar" ).progressbar( "option", {
    value: 15,
    max: 250
});

Feedback

We’d love to hear your feedback on these changes. We want to make sure we address any issues the community may have before we finalize and implement these changes. If you have any feedback, please post it on the related forum post. Thanks.

Accordion API Redesign

Posted on by

jQuery UI is undergoing an API redesign which will slim down the size of the API in order to provide a more stable codebase that is easier to learn and use. We’ll be posting the proposed changes over the next few weeks in order to gather feedback from the community. Our goal is to support the old (current) and new (proposed) APIs simultaneously in 1.9 and then remove support for the old APIs in 2.0. This post lists out the details of the proposed changes for the Accordion widget along with the reasoning behind each change.

API Redesign

Remove navigation and navigationFilter option.
The navigation-related options are being removed in favor of setting the active option during initialization. The built-in navigation filter didn’t always make sense and was turned off by default. We plan on adding a demo which shows how to implement the current navigation functionality as well a demo which shows how to use a cookie to store the active panel.

Merge the autoHeight, fillSpace and clearStyle options into a new option called fixedHeight
The autoHeight, fillSpace and clearStyle options all deal with similar issues and therefore cannot be used together. Having three options for the same feature (how tall the panels should be) creates a complex and confusing API. These three options are being replaced by a single boolean option called fixedHeight. When set to true (the default), all panels will have the same height. If the accordion has a height of “auto”, then all panels will be as tall as the tallest panel (equivalent of autoHeight: true). If the accordion has an explicit height, then all panels will be sized based on that height (equivalent of fillSpace: true). When fixedHeight is set to false, no calculations will be done for the height of the panels and they will be sized based on their content (equivalent of clearStyle: true).

Rename icon.headerSelected option to icon.activeHeader
This option is being renamed for consistency both within Accordion (active vs. selected when dealing with the active panel) and within the full jQuery UI suite.

Remove activate method
The activate method will be removed in favor of updating the active option. The inclusion of the activate method doesn’t simplify the use of the accordion and therefore isn’t necessary.

Rename resize method to refresh
This method is being renamed for consistency within the full jQuery UI suite. However, this will continue to only handle size changes for now. We do plan on supporting adding/removing panels in the future.

Rename changestart event to beforeactivate
This event is being renamed for consistency both within Accordion (activate vs. change when dealing with the active panel) and within the full jQuery UI suite.

Rename change event to activate
This event is being renamed for consistency both within Accordion (activate vs. change when dealing with the active panel) and within the full jQuery UI suite.

Add .ui-accordion-heading class
There is currently no class being added to the headings for each panel. This results in the stylesheet using .ui-accordion-header a for styling, which makes adding additional anchors to the headers difficult. To solve this, we will add a class to the first child of each header and use the new class for styling.

Feedback

We’d love to hear your feedback on these changes. We want to make sure we address any issues the community may have before we finalize and implement these changes. If you have any feedback, please post it on the related forum post. Thanks.

jQuery UI 1.9 Milestone 3 – Spinner

Posted on by

The third milestone release for jQuery UI 1.9 is out, featuring the new Spinner widget, in active development. It also includes updates to the Tooltip and Menu widgets that we did since our second milestone release.

What’s a Milestone Release?

A milestone release makes it easier to try out the latest development code of jQuery UI without necessarily having to check out code from GitHub.

With a milestone release you can try out new widgets that are pretty far along (though not yet final) and provide feedback based on released code with a specific version number.

Note: the API is subject to change as the code is still under active development.

Spinner

We’d love your feedback on our new Spinner widget, to help ready it for the 1.9 final release. The API is already in good shape, so if you start using it now, migrating to 1.9 final should be really easy.

A spinner is a simple widget that allows users to increment or decrement the current text box value without having to input it manually. Increments do not have to be whole numbers — they can be set to decimal values (0.1) or large increments (5) for each click.

The widget uses the jquery-global plugin for globalization of numbers, including parsing and formatting of decimal numbers and currency values. This gives it several hundred cultures that it can support from the start.

Demo: Currency

Demos

Play with some of the latest demos in the menu branch on our live code view site, view.jqueryui.com:

Download

You can download the jQuery UI 1.9 Milestone 3 – Spinner release as a zip file or via git:

File Downloads

Git

How to Provide Feedback

wiki page

To help with the design and development of the Spinner widget, visit the Spinner page on our Development & Planning wiki.

forum

If the comments section on the wiki page doesn’t provide enough room for your feedback, post to the Developing jQuery UI Forum and tag the post:

How to Contribute Code

If you have code changes for the Spinner, fork jQuery UI on GitHub, commit to the spinner branch, and submit a pull request.

If you’re new to git or GitHub, see our guide: How to submit a fix to jQuery UI – The Easy Way.

Comments

Note: please do NOT use the comments section of this blog post for feedback on the Spinner widget. This discussion should occur on the wiki page and the forum (see How to Provide Feedback, above).

If you have feedback on us doing our third milestone release, feel free to leave a comment below. Thank you.

jQuery UI 1.8.6

Posted on by

The sixth maintenance release for jQuery UI 1.8 is out. Along with official support for jQuery 1.4.3, this update brings bug fixes and enhancements for jQuery UI Core, the Widget Factory, the Mouse widget and the Position utility as well as the Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, and Tabs widgets. For the full list of changes, see the changelog. You can download it here:

Download

File Downloads

Svn (contains final files as they are in the zip, with @VERSION replaced with 1.8.6, all themes)

Git (contains pre-build files, with @VERSION not yet replaced with 1.8.6, base theme only)

Google Ajax Libraries API (CDN)

Custom Download Builder

New Features

In this release, we’ve added support for jQuery 1.4.3 and IE 9. We’ve also added some new features to all widgets and interactions, which are listed under the Widget Factory below.

Widget Factory

All widgets created through the widget factory now trigger a create event upon creation of each instance. For example, when creating a dialog via $( "#dialog" ).dialog() you can bind to the dialogcreate event or specify a create callback.

You can now specify additional logic for gathering options that should take precedence over default values, but not over options passed on initialization. Prior to this release, the widget factory had built-in support for using the metadata plugin to gather such options. As of 1.8.6, you can now specify whatever logic you want by creating a _getCreateOptions() method in your widget; the default method uses the metadata plugin to maintain backward compatibility.

When setting options via the option method, the full set of options is passed to a new method called _setOptions. The default implementation is to just pass off each individual option to the existing _setOption method. However, you may want to override _setOptions in order to batch the updates. Check out the dialog widget for a nice example of batching updates.

Datepicker

The datepicker widget now has support for two more localizations: Galician and Portuguese.

Progressbar

Progressbar has finally received an update, with the addition of a new callback. There is now a complete event that is triggered when the value reaches the maximum of 100%.

Effects

Color animations now support the borderColor shorthand property for animating all four sides with a single property.

Changelog

See the 1.8.6 Upgrade Guide for a list of changes that may affect you when upgrading from 1.8.5. For full details on what’s included in this release see the 1.8.6 Changelog.

Thanks

Thanks to all who helped with this release, specifically: aebond, Alkarex, AzaToth, bakatron, benjamin.neau, bgrinstead, bjoernhaeuser@gmail.com, boldewyn, burnrbr, can3p, chrisbarr, cim, clewis, Daniel Steigerwald, dejannenov, didroe, Dmitry Petrov, dziastinux, ehynds, enti, ergec, gavtaylor, itpretty, Ján Suchal, jenters, jitter, jmiller, joern.zaefferer, John Firebaugh, Jorge Barreiro, kbwood, kharpoh, Kryal, lfaustino, Lim Chee Aun, m157y, MechanisM, oov, phallstrom, PKBurgess1983, qpi, quaff, reidres, Richard D. Worth, rickgnyc, roncli, Rwhitbeck, Scott González, seb835, squix, stakach, Tanguy, unt01d, vaporetto, watanabe, waveduke, wiibaker, wprice, xirzec.

Comments

Note: please do NOT use the comments section of this blog post for reporting bugs. Bug reports should be filed in the jQuery UI Bug Tracker and support questions should be posted on the jQuery Forum.

If you have feedback on us doing our sixth maintenance release for jQuery UI 1.8, feel free to leave a comment below. Thank you.