jQuery UI 1.7 Upgrade Guide

link Overview

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

link Accordion

  • Renamed alwaysOpen option to collapsible (alwaysOpen is deprecated, to be removed in next release).
  • Removed selectedClass for consistency reasons to the CSS Framework.
  • Added resize() method.
  • Added changestart callback that is triggered before the animation starts.
  • Removed deprecated separate jQuery method .activate() (use accordion( "activate" ) instead).
  • Improved default for header option, removing the need to specify the option in 99% of all accordions.

link Datepicker

  • Removed options:
    • clearStatus
    • clearText
    • closeAtTop
    • closeStatus
    • currentStatus
    • dateStatus
    • dayStatus
    • highlightWeek
    • initStatus
    • mandatory
    • monthStatus
    • nextBigStatus
    • nextBigText
    • nextStatus
    • prevBigStatus
    • prevBigText
    • prevStatus
    • rangeSelect
    • rangeSeparator
    • showBigPrevNext
    • showStatus
    • showWeeks
    • statusForDate
    • weekHeader
    • weekStatus
    • yearStatus
  • Modified options:
    • changeMonth to defaultfalse- wastrue`
    • changeYear to defaultfalse- wastrue`
  • Added options:
    • showButtonPanel (default false)
  • Added localizations:
    • Serbian
    • Greek
    • Malaysian
    • Albanian
    • Persian
    • Esperanto
    • Croatian

link Dialog

  • Related events are now passed to all triggered events/callbacks (so for example keyCode information is now available).
  • Removed options and element from ui hash.
  • Removed overlay option (workaround: use the CSS Framework to style the overlay).
  • The default height is now set to "auto" so it stretches the dialog by default to the content height.
  • Removed autoResize option (now always auto resizes).
  • Added closeText option (default "close").
  • Added beforeclose callback for dialogs (can prevent closing the dialog by returning false).
  • Added ui-dialog-dragging and ui-dialog-resizing during drag and resize.
  • Removed (undocumented) options: dragHelper, resizeHelper. If you need to hide a dialog's contents during drag (for performance reasons), here are two work-arounds:

CSS:

1
2
3
 
.ui-dialog-dragging .ui-dialog-content {
    display: none;
}

JS:

1
2
3
4
5
6
7
8
 
$( "#dialog" ).dialog({
    dragStart: function() {
        $( this ).hide();
    },
    dragStop: function() {
        $( this ).show();
    }
});

link Draggable

  • Removed options from ui hash.
  • Deprecated absolutePosition in ui hash, use offset instead.
  • Added addClasses option.
  • connectToSortable option now accepts selectors.
  • Padding is now taken account in containment (previously, you could drag "beyond" the padding).
  • Added a revertDuration option since revert no longer checks for numbers.
  • Implemented more advanced features to the snap option - you can now pass in an object instead of a boolean into snap, possible keys are the callbacks snap/release (which both receive ui.snapItem) and items (jQuery selector, defaults to :data(draggable)).

link Droppable

  • Added addClasses option.
  • Deprecated absolutePosition in ui hash, use offset instead.
  • In the accept function the context (this) is now the DOMElement, not a wrapped jQuery object.

link Sortable

  • Added support for helper: "original". This way, the original element is dragged while the placeholder gets reordered in the DOM, and on mouseup, the DOM positions of placeholder and original switch. This is the recommended mode from now on because it doesn't involve copying the element. For legacy reasons, if you want to have it behave exactly like the old sortables, set the helper option to "clone".
  • appendTo option is ignored if the helper option is set to "original" (which is the default).
  • Added forcePlaceholderSize option to force setting the height and width of the placeholder to the height and width of the clicked element.
  • Implemented the option connected (boolean), for the serialize() method to also serialize connected lists.
  • Stop logic overhaul:
    • stop (and all other events that are fired on end (receive, update, remove, deactivate)) is triggered after everything else has been normalized (placeholder and helper removed, position restored).
    • For old behavior (for example to be able to check something on the placeholder at end), introduced new beforeStop callback.
  • If a key option is specified to sortable( "serialize" ), brackets are no longer automatically added to it.
  • New cancelling logic:
    • If you want to completely cancel a sort (practically undo the ongoing sort), return false in any of the callbacks.
    • Or instead, call the cancel() method on the sortable.
  • Refactored intersection logic:
    • Removed "guess" tolerance.
    • Introduced intelligent "intersect" tolerance (default).
  • connectWith option now accepts selectors.
  • Deprecated absolutePosition in ui hash, use offset instead.
  • Padding is now taken account in containment (previously, you could drag "beyond" the padding).

link Selectable

  • Removed element and options from ui hash.
  • Added missing ui-selectable-helper class to helper/lasso element.

link Slider

  • axis option was changed to orientation for consistency with other plugins.
  • handle option removed.
  • handles option removed.
    • You can create custom handles manually and then simply add the class ui-slider-handle and the slider will pick them up (not auto-gen).
  • ui.handle property (in callback function) was changed to a DOMElement, instead of a jQuery object.
    • Change ui.handle to $( ui.handle ).
  • steps/stepping options removed in favor of step option.
  • startValue and moveTo removed in favor of value and values options and methods.
  • round option removed.
  • distance option removed.
  • noKeyboard option removed.
  • New range options: min and max.
  • Handles are now left-aligned at the value. To center-align them, give the handle a negative margin-left of handlewidth / 2. For example:
1
2
3
4
 
.ui-slider-handle {
    width: 12px;
    margin-left: -6px;
}

For vertical slider handles, do the same with height and margin-bottom.

link Resizable

  • Changed options:
    • alsoResize now accepts selector.
  • Removed options:
    • transparent (workaround: use CSS).
    • preserveCursor (there's no usecase for preserveCursor set to false).
    • proportionallyResize (use alsoResize instead).
    • knobHandles

link Tabs

  • Markup requires a container for list and panels, thus can no longer tabify a <ul> directly. Instead, must call .tabs() on the containing element. In other words, replace $( "#tabs > ul" ).tabs(); with $( "#tabs" ).tabs();.
  • Removed options from ui event object.
  • Renamed deselectable option to collapsible (deselectable is deprecated, to be removed in next release).
  • Deprecated null as value for selected option in order to initialize tabs without active tab, instead use -1.
  • Removed ability to change class names via options.
  • Added abort() method to terminate running ajax tab requests and animations.
  • cookie option accepts additional name property.
  • States for hover and focus (.ui-state-hover, .ui-state-focus) added.
  • Default value for spinner option changed to "<em>Loading…</em>" (before em was added internally).