jQuery UI 1.8.4 Upgrade Guide

link Overview

This guide will assist in upgrading from jQuery UI 1.8.3 to jQuery UI 1.8.4. All changes are listed below, organized by plugin, along with how to upgrade your code to work with jQuery UI 1.8.4.

link Core

link Added dimension setters

(#5850) The following method signatures have been added for setting dimensions:

  • Added .innerWidth( value ) to set the width, including padding.
  • Added .innerHeight( value ) to set the height, including padding.
  • Added .outerWidth( value, [includeMargin] ) to set the width, including padding and borders, and optionally margins.
  • Added .outerHeight( value, [includeMargin] ) to set the height, including padding and borders, and optionally margins.

link Accordion

link Added ability to specify multiple events

(#3614) You can now pass multiple event types, space delimited, to the event option. Although there isn't really any combination of native events that make sense to use together, there are cases where using multiple custom events, or a combination of native and custom events is useful.

For example, if you're using the hover intent plugin, you can set the accordion to react to both the click event and the hoverintent event:

1
2
3
 
$( "#accordion" ).accordion({
    event: "click hoverintent"
});

link Autocomplete

link Added appendTo option

(#5836) You can now define which element the menu is appended to. The default is to append to the body, which is the previous behavior. The appendTo option takes any valid selector. If the selector matches multiple elements, the menu will be appended to the first matched item.

1
2
3
 
$( "#autocomplete" ).autocomplete({
    appendTo: "#foo"
});

link Added position option

(#5153) You can now define where the menu will be displayed. The default is to display the menu below the text field, with the left edges aligned. The full position API is available for use.

To have the menu display above the text field, you can do:

1
2
3
4
5
6
 
$( "#autocomplete" ).autocomplete({
    position: {
        my: "left bottom",
        at: "left top"
    }
});

link Removed styling for ui-autocomplete-loading class

(#5385) Previously the loading class would add an animated loading gif to the background of the text field. This has been removed until ThemeRoller can support generating animated images.

You can recreate the previous styling by defining a rule for the ui-autocomplete-loading class in your stylesheet:

1
2
3
 
.ui-autocomplete-loading {
    background: #f00 url("images/loading.gif") right center no-repeat;
}

link Labels are now treated as text, not HTML

(#5275) If you want the old functionality back, you can use Scott González' html extension which adds a boolean html option.

link Dialog

link Added ability to use the position API for the position option

(#5459) Passing a string or array to the position option still works, but will be removed in a future version.

If you're currently using strings for the position option, you will now need to pass an object containing two properties: my and at, each with the same string you're passing now. For example, if you're currently doing:

1
2
3
 
$( "#dialog" ).dialog({
    position: "left"
});

You should switch to:

1
2
3
4
5
6
 
$( "#dialog" ).dialog({
    position: {
        my: "left",
        at: "left"
    }
});

If you're currently using arrays for the position option, you will now need to pass an object telling the dialog to position itself in the top left corner, with an offset equal to what you're currently passing. For example, if you're currently doing:

1
2
3
 
$( "#dialog" ).dialog({
    position: [ 20, 100 ]
});

You should switch to:

1
2
3
4
5
6
7
 
$( "#dialog" ).dialog({
    position: {
        my: "left top",
        at: "left top",
        offset: "20 100"
    }
});

Note that offset is a string containing both the horizontal and vertical offset delimited by a space.

link Buttons are now accessed in the proper order

(#4529) Previously the default styling for buttons was to have them float right, causing them to be ordered and tabbed to in reverse order. A wrapper div has been added around the buttons, and the wrapper is now floated right. This means that if you have dialogs with multiple buttons, the order will be different.

Let's assume you've created a dialog with the following options:

1
2
3
4
5
6
 
$( "#dialog" ).dialog({
    buttons: {
        OK: function() {},
        Cancel: function() {}
    }
});

In previous versions, this would results in the OK button being displayed on the right and the Cancel button being displayed on the left, which is the opposite from how they're ordered in the object. However, when tabbing through the dialog, the OK button would gain focus before the Cancel button.

In 1.8.4, this will result in the OK button being displayed on the left and the Cancel button being displayed on the right. The buttons will still be tabbed through in the same order, following the tab order users would expect based on the visual layout.

If you want your buttons to continue displaying in the same visual order as they have been, you will need to define your buttons in the reverse order from what you're currently using. So the above code would become:

1
2
3
4
5
6
 
$( "#dialog" ).dialog({
    buttons: {
        Cancel: function() {},
        OK: function() {}
    }
});

link Tabs

link Added ability to reference tabs by href

(#3171) Let's assume you have a set of tabs created from the following list:

1
2
3
4
5
 
<ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
</ul>

You can activate the bar tab by calling the select() method with an index of 1:

1
 
$( "#tabs" ).tabs( "select", 1 );

However, keeping track of the index for each tab can be difficult, especially if you've customized your tabs by making them closable or sortable. To make this easier, we've added the ability to pass the href instead of the index:

1
 
$( "#tabs" ).tabs( "select", "#bar" );

The same syntax can be used for the enable(), disable(), load() and remove() methods.