-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Upgrade guide: Add jQuery UI 1.14 Upgrade Guide
Also, fix some typos in the 1.12 & 1.13 upgrade guides. Closes gh-215
- Loading branch information
Showing
3 changed files
with
77 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<script>{ | ||
"title": "jQuery UI 1.14 Upgrade Guide", | ||
"toc": true | ||
}</script> | ||
|
||
## Overview | ||
|
||
This guide will assist in upgrading from jQuery UI 1.13.x to jQuery UI 1.14.x. All changes are listed below, organized by plugin, along with how to upgrade your code to work with jQuery UI 1.14. | ||
|
||
## Reminder: API Redesigns | ||
|
||
jQuery UI 1.12 introduced API redesigns for Button, Buttonset, Dialog, Draggable, Droppable, Menu, Mouse, Resizable, Selectable, Sortable, Tabs, Tooltip, and Effects. You can read about the API redesign process on the | ||
[jQuery UI Blog](https://blog.jqueryui.com/2011/03/api-redesigns-the-past-present-and-future/). Although the redesigns introduced breaking changes, **1.12, 1.13 & maintain a lot of compatibility with the 1.11 API by default.** This is accomplished by rebuilding the 1.11 API on top of the 1.12/1.13/1.14 API. However, since 1.14, the default behavior is only loading the new API. If you would like to load the legacy 1.11 API as well, you can set the `$.uiBackCompat` flag to `true`. | ||
|
||
```html | ||
<script src="jquery.js"></script> | ||
<script>$.uiBackCompat = true;</script> | ||
<script src="jquery-ui.js"></script> | ||
``` | ||
|
||
<p class="note">If you find a regression from the 1.11 API, please report it in the <a href="https://github.com/jquery/jquery-ui/issues/new">bug tracker</a>. Even though the 1.11 API is deprecated, it's important for 1.14 releases not to regress so that users are encouraged to upgrade even if they're not ready to use the new APIs.</p> | ||
|
||
## General changes | ||
|
||
The main focus of this release was reducing the maintenance. This resulted in a few breaking changes. | ||
|
||
### Reduced browser support | ||
|
||
Only the latest version of Chrome, Firefox, Safari & Edge are officially supported; there is no support for any version of IE and Edge Legacy. Contrary to what was done in past releases, code supporting unsupported browsers has been deleted. | ||
|
||
### Reduced jQuery support | ||
|
||
Only the latest jQuery version within each major version of jQuery is supported. To make updates easier, we also run tests with a few other relatively recent versions, but we don't guarantee continued support for them in all jQuery UI releases in the `1.14.x` line. Each jQuery UI version will document on which jQuery versions it was tested - both in the release blog post and in the changelog page at https://jqueryui.com/changelog/. | ||
|
||
### The backwards compatibility flag is off by default | ||
|
||
Backwards compatibility with the 1.11 API is disabled by default. To re-enable it (restoring the default 1.13 behavior), set the `jQuery.uiBackCompat` flag to true. | ||
|
||
### Removed APIs | ||
|
||
The following APIs have been removed: | ||
* `$.fn._form`. Instead of `$( elem )._form()`, use `$( elem ).prop( "form" )`. | ||
* `$.ui.ie`. No version of IE is supported anymore and this API already only reported IE <11. | ||
* `$.ui.safeActiveElement`. Use native `document.activeElement`. | ||
* `$.ui.safeBlur`. Instead of `$.ui.safeBlur( elem )`, use `$( elem ).trigger( "blur" )`. | ||
|
||
### Files & directory structure | ||
|
||
There have been some minor changes to source files: | ||
* The deprecated file `ui/core.js` has been removed. | ||
* Files defining removed APIs have been removed. This includes: `ui/form.js`, `ui/ie.js`, `ui/safe-active-element.js` & `ui.safe-blur.js`. | ||
* Directories `.github`, `build` & `external` have been removed from the npm package | ||
|
||
### Newer jQuery features | ||
|
||
As part of making sure jQuery UI doesn't depend on deprecated jQuery APIs, in 1.13 we started using some newer jQuery APIs, polyfilling them in the `jquery-patch.js` file for older jQuery versions. In 1.14, that file is deprecated and it's no longer required for compatibility with some older supported jQuery versions. It is provided for backwards compatibility - so that apps depending on those patches continue to work after the upgrade. The file has no effect in jQuery 3.5.0 or newer. | ||
|
||
### Improved tests on PRs | ||
|
||
jQuery UI 1.14 is tested in all supported browsers & jQuery versions not only post-merge as was done in the past, but also on every pull request via GitHub Actions. | ||
|
||
# Effects | ||
|
||
The bundled jQuery Color version has been updated from v2 to v3. This changes the serialized values of color properties to include a space after each comma; e.g. `rgb(127, 127, 127)` instead of `rgb(127,127,127)`. Also, transparent values now report `rgba(0, 0, 0, 0)` instead of `transparent`. This matches the standard browser serialization. It mostly affects direct usage of jQuery Color, for example: | ||
```js | ||
// jQuery Color 2.x: | ||
jQuery.Color( 0, 100, 200 ) + ""; // "rgb(0,100,200)" | ||
jQuery.Color( 0, 100, 200, 0 ) + ""; // "transparent" | ||
jQuery.Color( 0, 0, 0, 0 ) + ""; // "transparent" | ||
|
||
// jQuery Color 3.x: | ||
jQuery.Color( 0, 100, 200 ) + ""; // "rgb(0, 100, 200)" | ||
jQuery.Color( 0, 100, 200, 0 ) + ""; // "rgab(0, 100, 200, 0)" | ||
jQuery.Color( 0, 0, 0, 0 ) + ""; // "rgab(0, 0, 0, 0)" | ||
``` |