Overview

This guide will assist in upgrading from jQuery UI 1.5.3 to jQuery UI 1.7. See below for a list of all changes (API, markup, css classnames) between these two versions, organized by plugin.

Interactions

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))

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

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 behaviour (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)

Selectable

• removed 'element' and 'options' from UI hash
• added missing ui-selectable-helper class to helper/lasso element

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

    Work-around

    <style type="text/css">
    .ui-resizable-handle { width: 8px; height: 8px; border: 1px solid rgb(128, 128, 128); background: rgb(242, 242, 242); }
    .ui-resizable-n, .ui-resizable-s { left: 45%; }
    .ui-resizable-e, .ui-resizable-w { top: 45%; }
    .ui-resizable-se { bottom: -5px; right: -5px; }
    </style>
    

Widgets

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 seperate jQuery method fn.activate (use accordion('activate') instead)
• Improved default for header option, removing the need to specify the option in 99% of all accordions

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 default false - was true
  • changeYear to default false - was true
• added options:
  • showButtonPanel (default false)
• added localizations
  • serbian
  • greek
  • malaysian
  • albanian
  • persian
  • esperanto
  • croatian

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: .ui-dialog-dragging .ui-dialog-content { display: none; }
  • JS: $("#dialog").dialog({

      dragStart: function() { $(this).hide(); },

      dragStop: function() { $(this).show(); }

    });

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

  if you want 5 evenly divided pieces, specify

  min: 0, max: 5, step: 1

  or

  min: 0, max: 100, step: 20

• '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:

  .ui-slider-handle { width: 12px; margin-left: -6px; }
  

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

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 addional 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).