JQuery UI - Interface Design In JQuery - UI Training

Learn core jQuery UI methods for interface design, including unique ID generation and removal, z-index getters and setters, and the scrollParent method, with examples on creating and using widgets.

Explore the new core selectors in jquery ui, including the data selector, focus selector, and table selector, with examples that select elements by data keys, focusability, and keyboard accessibility.

Learn how jQuery UI overrides the focus method to set focus asynchronously with a delay and callback, triggering handlers, demonstrated by focusing an anchor after 1 second and logging results.

Learn how jQuery ui uses a consistent shared api across components, with the same initialization method and options for setting or getting values, plus destroy, enable, disable, and refresh utilities.

Explores shared API configuration options in the jQuery UI library, including disabled, append to, and icons, and notes how defaults vary by component like autocomplete, dialog, and spinner.

Explore shared events across jQuery UI components, including create, start and stop, drag start, change, and open and close events for autocomplete, dialog, tooltip, and sortable.

Explore the position utility in jquery ui to align an element or widget relative to another element or to the page, using my, at, and off options.

Explore jQuery UI easing by comparing linear and swing speeds, using plugins to access easing types, including ease out bounce, and applying duration with a third parameter for effects.

Explore the jquery ui accordion widget and initialize by selecting the outer container and calling the accordion method to create a single accessible section visible at a time.

Configure the accordion widget with options: event, collapsible, active, heightStyle. Open panels on hover, control which panel loads by default, and adjust height behavior to auto, fill, or content.

Explore how the jQuery UI accordion fires create, beforeActivate, and activate events, bind handlers via an options object, and use the UI object to control and identify the active panel.

Explore the jQuery UI progress bar widget, a data-driven control that visually reports task progress in deterministic and non-deterministic modes, with simple initialization and interval updating.

Configure a jQuery UI progress bar for manual progress, set max and value, and update it with page hash fragments and hashchange events as users move through steps.

Discover how jQuery UI progress bar fires change and complete events to reflect progress, update an associated input, and dynamically display a completion message using insert after and remove methods.

Explore the default tabs widget in jQuery UI, showing one content panel at a time and switching panels by clicking tab headings, with a straightforward markup structure.

Explore how to configure the jQuery UI tabs widget, including enabling active panels, show and hide animations, and using the option method to switch tabs programmatically.

Load tab content with Ajax by pointing tab headings to a domain file, then use the load method to lazily or repeatedly fetch remote tab panels, respecting cross-domain rules.

Explore jQuery UI tabs events, including activate, before activate, before load, and load, and learn to bind handlers, show a loading spinner for remote content, and use the position utility.

Explore the jQuery UI button widget, learn to enhance buttons for a consistent look and feel, group radios and checkboxes with button set, and apply icons when possible.

Configure jQuery UI button widgets using options, adding primary and secondary icons with the icons option. Create icon-only buttons and icon-enabled radios, and apply the button set method to groups.

Explore the jquery ui slider widget, including track, thumb, horizontal and vertical sliders, multiple handles, and style ranges; learn to initialize, configure options, and respond to value changes.

Learn to configure the jQuery UI slider with options such as animate, min, max, step, and orientation. Enable animation and adjust duration, or switch between horizontal and vertical sliders.

Learn to create jQuery UI sliders with multiple handles by setting the values option to an array, creating multiple thumbs at 25 and 75, and enabling a range indicator.

Explore jQuery UI slider events such as start, slide, change, stop and create, and learn two-way binding with an input field to display and control the slider value.

Discover how the tooltip widget replaces native tooltips with a styled, consistent user interface. It offers custom positioning and a flexible content model driven by title attributes.

Control tooltip content in jQuery UI by using the content option with a string or a callback, compile Handlebars templates with a context object, and initialize the tooltip.

Learn to position tooltips with the position utility, set my and at anchors, adjust with offsets, rely on collision detection to flip, and enable track to follow the mouse.

Control tooltip animations in jQuery UI by adjusting show and hide options with booleans, numbers, strings, or objects; customize duration, delay, and easing, and apply effects like drop-down and fold.