When focus is on a header, the following key commands are available:
UP/LEFT: Move focus to the previous header. If on first header, moves focus to last header.DOWN/RIGHT: Move focus to the next header. If on last header, moves focus to first header.HOME: Move focus to the first header.END: Move focus to the last header.SPACE/ENTER: Activate panel associated with focused header.When focus is in a panel:
CTRL + UP: Move focus to associated header.ui-accordion: The outer container of the accordion.
ui-accordion-header: The headers of the accordion. The headers will additionally have a ui-accordion-icons class if they contain icons.ui-accordion-content: The content panels of the accordion.ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class. The headers will also have a ui-accordion-icons class if they contain icons.
+ ui-accordion-header-icon: Icon elements within each accordion header.ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.[x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.While open, the dialog widget ensures that tabbing cycles focus between elements within the dialog itself, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
+While open, the dialog widget ensures that keyboard navigation using the 'tab' key causes the focus to cycle amongst the focusable elements in the dialog, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened.
@@ -55,7 +55,7 @@ui-dialog: The outer container of the dialog.
+ ui-dialog: The outer container of the dialog. If the draggable option is set, the ui-dialog-dragging class is added during a drag. If the resizable option is set, the ui-dialog-resizing class is added during a resize. If the buttons option is set, the ui-dialog-buttons class is added.
ui-dialog-titlebar: The title bar containing the dialog's title and close button.
@@ -101,15 +101,36 @@
true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
+ui-draggable: The draggable element. When the draggable is disabled, the ui-draggable-disabled class is added. While dragging, the ui-draggable-dragging class is added.ui-draggable-handle: The handle of the draggable, specified using the handle option. By default, the draggable element itself is also the handle.false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() on hundreds of elements.{ top, left, right, bottom }.classes option, after initialization:
+// Getter
+var classes = $( ".selector" ).widget( "option", "classes" );
+
+// Setter, override all classes
+$( ".selector" ).widget( "option", "classes", { "custom-header": "icon-warning" } );
+
+// Setter, override just one class
+$( ".selector" ).widget( "option", "classes.custom-header", "icon-warning" );
+
+ This provides a hook for the user to add additional classes or replace default styling classes, through the classes option.
It also provides automatic removal of these classes when a widget is destroyed, as long as you're using _addClass(), _removeClass() and _toggleClass() together. This can heavily simplify the implementation of custom _destroy() methods.
this.element.classes option matches a key, the value will be added as well.
+ When you only need the extra argument, you can skip this argument by specifying null.
keys argument, these aren't associated with any properties of the classes option. Just like keys, they will also be automatically removed when destroying the widget.ui-progressbar class to the widget's element (this.element). Will also add any additional classes specified through the classes option for the given class.demo-popup-header class to the specified element (here referencing this.popup). Will also add any additional classes specified through the classes option for the given class. In addition, it will always add the ui-front class.ui-helper-hidden-accessible class to the specified element. Uses null for the keys argument to skip it.The arguments are the same as for the _addClass() method, the same semantics apply, just in reverse.
optionName.width option.
+ The element to remove the classes from. Defaults to this.element.
+
+
+
+ The classes to remove, as a space-delimited list. If a property of the classes option matches a key, the value will be removed as well.
+ When you only need the extra argument, you can skip this argument by specifying null.
+
+
+
+ Additional classes to remove, required for layout or other reasons. Unlike the keys argument, these aren't associated with any properties of the classes option.
+
+
+ Remove the ui-progressbar class from the widget's element (this.element). Will also remove any additional classes specified through the classes option for the given class.
+
- optionName.width option to 500.height and width options to 500.jQuery object containing the The arguments are the same as for the _addClass() and _removeClass() methods, except for the additional boolean argument that specifies to add or remove classes.
Unlike jQuery's .toggleClass() method, the boolean add argument is always required.
this.element.classes option matches a key, the value will be toggled as well.
+ When you only need the extra argument, you can skip this argument by specifying null.
keys argument, these aren't associated with any properties of the classes option. Just like keys, they will also be automatically removed when destroying the widget.Indicates whether to add or remove the specified classes, where a boolean true indicates that classes should be added, a boolean false indicates that classes should be removed.
ui-state-disabled class on the widget's element (this.element).destroy() method cleans up all common data, events, etc. and then delegates out to _destroy() for custom, widget-specific, cleanup.
This can be used to find all the <label> elements associated with an <input> element. The association can be through nesting, where the label is an ancestor of the input, or through the for attribute on the label, pointing at the id attribute of the input. If no labels are associated with the given element, an empty jQuery object is returned.
This methods mimics the native labels property, which isn't supported in all browsers. In addition, this method also works for document fragments.
A menu can be created from any valid markup as long as the elements have a strict parent/child relationship and each menu item has an anchor. The most commonly used element is the unordered list (<ul>):
A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<ul>). Additionally, the contents of each menu item must be wrapped with a block-level DOM element. In the example below <div> elements are used as wrappers:
Menu automatically adds the necessary padding to items without icons.
Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes:
+Divider elements can be created by including menu items that contain only spaces and/or dashes:
ENTER/SPACE: Invoke the focused menu item's action, which may be opening a submenu.UP: Move focus to the previous menu item.DOWN: Move focus to the next menu item.RIGHT: Open the submenu, if available.LEFT: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.ESCAPE: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.
@@ -71,12 +90,17 @@ui-menu: The outer container of the menu. This element will additionally have a ui-menu-icons class if the menu contains icons.
+ ui-menu: The outer container of the menu, as well as any nested submenu. This top-level element will additionally have a ui-menu-icons class if the menu contains icons.
ui-menu-item: The container for individual menu items.
+ ui-menu-item: The container for individual menu items. This contains the element for the item's text itself as well as the element for submenus.
ui-menu-divider: Divider elements between menu items.focus event.
+ Activates the given menu item and triggers the menu's focus event. Opens the menu item's sub-menu, if one exists.
Similar to jQuery.Widget, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to jQuery.Widget, but it does include internal methods that are not intended to be overwritten. The intended public API is _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().
Similar to jQuery.Widget, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to jQuery.Widget, but it does include internal methods that are not intended to be overwritten. The intended public API is _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().
This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.
"right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections.
+ui-selectable: The selectable element.
+ ui-selectee: One of the selectable elements, as specified through the filter option. This element can also receive one of the following classes: ui-selecting (when the lasso includes this element), ui-selected (after a successful selection), ui-unselecting (when the lasso lost this element).ui-selectable-helper: The "lasso" element used to visualize the ongoing selection.Triggered when a remote tab is about to be loaded, after the beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to ui.jqXHR and ui.ajaxSettings.
Note: Although ui.ajaxSettings is provided and can be modified, some of these settings have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax().
Note: Although ui.ajaxSettings is provided and can be modified, some of these properties have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax().
jqXHR object that is requesting the content.jQuery.ajax to request the content.jQuery.ajax to request the content.disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).
href of the tab to disable.href of the tab to disable.$( "#example" ).tabs( "option", "disabled", [] );.href of the tab to enable.href of the tab to enable.href of the tab to load.heightStyle option.my-tabs or fall back to the default implementation.
- A selector indicating which items should show tooltips. Customize if you're using something other then the title attribute for the tooltip content, or if you need a different selector for event delegation.
+ A selector indicating which items should show tooltips. Customize if you're using something other than the title attribute for the tooltip content, or if you need a different selector for event delegation.
When changing this option, you likely need to also change the content option.
@@ -70,10 +90,10 @@
- 80
+ 100
Create a tooltip on the document, using event delegation for all elements with a title attribute.
+
+
-
- .zIndex()
- Get the z-index for an element.
-
- The .zIndex() method is useful for finding the z-index of an element, regardless of whether the z-index is set directly on the element or on one of its ancestors. In order to determine the z-index, this method will start at the specified element and walk up the DOM until it finds an element that is positioned and has a z-index set. If no such element is found, then the method will return a value of 0.
- This method assumes that elements with nested z-indexes would not have a z-index of 0. For example, given the following DOM the inner element will be treated as if it does not have a z-index set because it is impossible to differentiate between an explicit value of 0 and no value in Internet Explorer.
-
- <div style="z-index: -10;">
- <div style="z-index: 0;"></div>
- </div>
-
-
-
-
- .zIndex()
- Set the z-index for an element.
-
-
- The z-index to set.
-
-
-
- This is equivalent to .css( "zIndex", zIndex ).
-
-
-
diff --git a/entries2html.xsl b/entries2html.xsl
index ead4e803..0f3586ff 100644
--- a/entries2html.xsl
+++ b/entries2html.xsl
@@ -9,10 +9,10 @@
<head>
<meta charset="utf-8">
<title>
+ <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
<style>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+ <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+ <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
-
.
diff --git a/grunt.js b/grunt.js
deleted file mode 100644
index 26a9b080..00000000
--- a/grunt.js
+++ /dev/null
@@ -1,76 +0,0 @@
-module.exports = function( grunt ) {
-
-var entryFiles = grunt.file.expandFiles( "entries/*.xml" );
-
-grunt.loadNpmTasks( "grunt-clean" );
-grunt.loadNpmTasks( "grunt-wordpress" );
-grunt.loadNpmTasks( "grunt-jquery-content" );
-grunt.loadNpmTasks( "grunt-check-modules" );
-
-grunt.initConfig({
- clean: {
- folder: "dist"
- },
- lint: {
- grunt: "grunt.js"
- },
- watch: {
- files: entryFiles.concat( grunt.file.expandFiles( "resources/**") ),
- tasks: "deploy"
- },
- xmllint: {
- all: [].concat( entryFiles, grunt.file.expandFiles( "includes/**" ),
- "categories.xml", "entries2html.xsl", "notes.xsl" )
- },
- xmltidy: {
- all: [].concat( entryFiles, "categories.xml" )
- },
- "build-pages": {
- all: grunt.file.expandFiles( "pages/**" )
- },
- "build-xml-entries": {
- all: entryFiles
- },
- "build-resources": {
- all: grunt.file.expandFiles( "resources/**" )
- },
- wordpress: grunt.utils._.extend({
- dir: "dist/wordpress"
- }, grunt.file.readJSON( "config.json" ) )
-});
-
-grunt.registerTask( "manifest", "Generate categories.json manifest file", function() {
- var categories,
- categoryPosts = {},
- done = this.async();
-
- categories = require( "./" + grunt.config( "wordpress.dir" ) + "/taxonomies" ).category;
- categories.forEach(function( category ) {
- category.posts = categoryPosts[ category.slug ] = [];
- });
-
- grunt.helper( "wordpress-walk-posts", grunt.config( "wordpress.dir" ), function( post, callback ) {
- if ( post.termSlugs && post.termSlugs.category ) {
- post.termSlugs.category.forEach(function( slug ) {
- categoryPosts[ slug ].push( post );
- });
- }
- callback();
- }, function( error ) {
- if ( error ) {
- grunt.error.log( error.message );
- return done( false );
- }
-
- grunt.file.write( grunt.config( "wordpress.dir" ) + "/categories.json",
- JSON.stringify( categories, null, "\t" ) + "\n" );
- done();
- });
-});
-
-grunt.registerTask( "default", "build-wordpress" );
-grunt.registerTask( "build", "build-pages build-xml-entries build-xml-categories build-resources build-xml-full" );
-grunt.registerTask( "build-wordpress", "check-modules clean lint xmllint build" );
-grunt.registerTask( "tidy", "xmllint xmltidy" );
-
-};
diff --git a/includes/animation-argument-complete.xml b/includes/animation-argument-complete.xml
index 042fdf45..5d109f39 100644
--- a/includes/animation-argument-complete.xml
+++ b/includes/animation-argument-complete.xml
@@ -1,4 +1,4 @@
- A function to call once the animation is complete.
+ A function to call once the animation is complete, called once per matched element.
diff --git a/includes/animation-signature-options.xml b/includes/animation-signature-options.xml
index 36905da8..90d54795 100644
--- a/includes/animation-signature-options.xml
+++ b/includes/animation-signature-options.xml
@@ -18,12 +18,12 @@
- A function to call once the animation is complete.
+ A function to call once the animation is complete, called once per matched element.
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
+ A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. A string can also be provided, in which case the animation is added to the queue represented by that string.
false, the animation will begin immediately. A string can also be provided, in which case the animation is added to the queue represented by that string.Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.
classes option specified, changing the theming for the ui- class:
+$( ".selector" ).
+ classes option, after initialization, here reading and changing the theming for the ui- class:
+// Getter
+var themeClass = $( ".selector" ).
+ Retrieves the undefined is returned.
Unlike other widget methods, instance() is safe to call on any element after the
optionName.Gets the value currently associated with the specified optionName.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.
optionName.Sets the value of the optionName.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.
The
The classes option:
The best way to understand how an easing will affect an animation is to see the equation graphed over time. See below for a graph of all animations available in jQuery UI.
- + diff --git a/pages/theming/css-framework.html b/pages/theming/css-framework.html index 102293bc..12cdaa6f 100644 --- a/pages/theming/css-framework.html +++ b/pages/theming/css-framework.html @@ -114,6 +114,6 @@.ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity.
.ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative).
+ .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Sets box-shadow x & y offset, blur radius and color.
The following is a full list of the icons provided:
- \ No newline at end of file + \ No newline at end of file diff --git a/pages/theming/stacking-elements.md b/pages/theming/stacking-elements.md index 538ad718..da00a736 100644 --- a/pages/theming/stacking-elements.md +++ b/pages/theming/stacking-elements.md @@ -6,40 +6,26 @@ } } -Widgets that stack, or move in front of other elements, often present challenges -when placed into real world pages. It's usually easy to either change the `z-index` -or parent of the stacked element to avoid any collisions on the page. However, -jQuery UI needs a generic solution that doesn't require manually playing with -`z-index` values. This is accomplished via the `ui-front` class, and usually an -accompanying `appendTo` option on stacking widgets. +Widgets that stack, or move in front of other elements, often present challenges when placed into real world pages. It's usually easy to either change the `z-index` or the parent of the stacked element to avoid any collisions on the page. However, jQuery UI needs a generic solution that doesn't require manually playing with `z-index` values. This is accomplished via the `ui-front` class, and usually an accompanying `appendTo` option on stacking widgets. ## The `ui-front` class -The `ui-front` class is very basic. It just sets a static `z-index` value on the -element. However, the existence of the class is used to indicate where stacking -elements should be appended. This allows us to take advantage of nested stacking -contexts, resulting in a default DOM position that works for most use cases. +The `ui-front` class is very basic. It just sets a static `z-index` value on the element. However, the existence of the class is used to indicate that an element is a stacking element, which indicates where additional stacking elements should be appended. This allows us to take advantage of nested stacking contexts, resulting in a default DOM position that works for most use cases. -*Note: When using `ui-front`, you must also set `position` to `relative`, -`absolute` or `fixed` in order for the `z-index` to be applied.* +*Note: When using `ui-front`, you must also set `position` to `relative`, `absolute` or `fixed` in order for the `z-index` to be applied.* ## The stacking technique -Any widget that appends a stacking element to the page must use the `ui-front` -class, and in many cases should have an `appendTo` option. The following logic -should be applied to the stacking element: - -* If a value is provided for the `appendTo` option, then append the stacking -element to the specified element. -* If the `appendTo` option is set to `null` (default), then the widget should -walk up the DOM from the associated element. For example, when the autocomplete -menu is appended to the DOM, the walking starts from the associated input element. - * If an element with the `ui-front` class is found, append to that element. - * If no element with the `ui-front` class is found, append to the body. -* The stacking element must also have `position` set to `relative`, `absolute`, -or `fixed` in order for the `z-index` from the `ui-front` class to be applied. -Using [.position()](/position/) will automatically set `position`. +Any widget that appends a stacking element to the page must use the `ui-front` class, and in many cases should have an `appendTo` option. The following logic should be applied to the stacking element: + +* If a value is provided for the `appendTo` option, then append the stacking element to the specified element. +* If the `appendTo` option is set to `null` (default), then the widget should walk up the DOM from the associated element. For example, when the autocomplete menu is appended to the DOM, the walking starts from the associated input element. + * If another stacking element is found, append to that element. + * If no other stacking elements are found, append to the body. +* The stacking element must also have `position` set to `relative`, `absolute`, or `fixed` in order for the `z-index` from the `ui-front` class to be applied. Using [.position()](/position/) will automatically set `position`. + +Stacking elements are defined as elements with the `ui-front` class, or any native element that creates a new stacking context. Currently, `