jQuery Topics
jQuery Awesome
jQuery Delicious
jQuery Buzz

Dialog API Redesign

Wednesday, September 7, 2011
Tagged: , , ,
By jQuery Aggregator on Wednesday, September 7, 2011 — Comments

Continuing with the API redesign, we have some changes planned for the Dialog widget. We know that API changes like this are not without cost to our users, so we’d like to make it clear that except where specifically noted, jQuery UI Dialog in 1.9 will support the 1.8 API as well, and the deprecated APIs will not be removed until jQuery UI 2.0. Read more about the full jQuery UI API redesign.

API Redesign

Contain focus in dialog
We currently only contain focus inside modal dialogs. We will be changing this behavior to always contain focus, even in modeless dialogs. This will bring us more in line with the DHTML Style Guide. We’re not sure about implementing a key command to move the focus out of the dialog (such as F6) since that would require defining a system to track where focus should move.

Allow disabling dialogs
Dialogs don’t currently support being disabled. They do inherit the default behavior of adding the ui-state-disabled class, which makes the dialog look disabled, but the user can still interact with elements in the dialog. In order to support disabling a dialog, we will place a div over the dialog to prevent mouse interaction.

Ability to configure which element gains focus
When opening a dialog, we search for which elements are tabbable and we focus the first element that we find. If there are no tabbable elements, then we focus the dialog itself. We will be adding an autoFocus option, which will allow customizing which element gains focus. The option will accept a function which will return the element to focus. The default value for the option will be the current implementation. If no element is found using the option, the dialog will be focused.

Move dialog back to original DOM position on destroy
When dialogs are created they are moved to the end of the body. When dialogs are destroyed, they currently stay at the end of the body. We will be changing this behavior so the dialog is returned to the original position, if possible. This will be done by tracking either a sibling or the parent on create.

Automatic stacking
The stack option controls whether a dialog will move on top of other dialogs when it gains focus. Since this should always be the case, we will be removing the option and forcing the behavior. In addition, we will probably remove the moveToTop method since the proper dialog(s) should always be available to the user based on when they were opened and whether they are modal or modeless.

Saner modality
The current implementation for managing modal dialogs is a bit unwieldy, comparing the z-index of elements and often causing problems. We plan to simplify the implementation and switch to a hierarchy-based solution instead of a style-based solution.

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.

Read the full/original article at jQuery UI Blog

    Related Posts

    Comments are closed.

    « Previous post:
    Next post:  »
    jQuery Resources

    Learn more about jQuery

    jQuery News & Links

    I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used ...

    jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to ...

    jQuery function to Set any DOM Element to Top View (bring to front) using CSS Z-Index property.

    Is it possible to declare arrays in JavaScript object literal notation? Example 1 – this works with arrays Declaration: Storage ...

    To get the a variables type using jQuery there is a jQuery function called .type() which returns “array”, “string”, “number”, ...

    In this post you can find tutorials which explain step by step different API use cases with jQuery like Google ...

    For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products ...

    Today we are sharing with you a collection of awesome jQuery Camera Photo plugins. They offer a range of image ...

    Back in the day, if you saw something that was animated on a website it was automatically assumed to be ...

    In this post, we have compiled a list of 10 jQuery HTML5 Audio players available today, most allow native audio ...

    jQuery Mobile is a powerful framework for making mobile web applications. But can we use it to convert existing desktop ...

    I have jotted a quick post on a Basic JavaScript Regular Expression Example to give beginners out there a taste ...

    In April 2012′s edition of Interestingly Random JavaScript, jQuery and Web Development we bring you some very cool stuff such ...

    In this post we are sharing you a roundup of 10 really jQuery plugins as of today. Pretty cool plugins ...

    As always expected from the jQuery community, the compilation we have for you today are some good and impressive recently ...

    A collection of jQuery PNG/JPEG/GIF plugins that enables image animation, cartoon-like background, etc… let them help you design displays for ...

    A collection of JavaScript/jQuery Zip/File/Compressor plugins that allows you to minify your JS code and compress your JS files ready ...

    Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on ...

    Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. ...

    jQuery code snippet which outputs all attributes of element using the default .attr() function on any dom element(s). usage: output:

    More Links & News

    Community Resources

    Use jQuery and the Google Maps API to create your own map application.

    Super cool and easy way to get stylish tooltips with jQuery.

    The right way to include the jQuery library in WordPress.

    Share a resource