jQuery UI Introduction

jQuery UI is an official collection of interactions, effects, widgets, and themes built on top of jQuery. While jQuery handles DOM manipulation and events, jQuery UI adds ready-made user interface components — things like date pickers, sortable lists, dialog boxes, and progress bars.

jQuery vs jQuery UI

What jQuery UI Provides

Interactions

• Draggable — make elements drag-and-drop capable
• Droppable — define drop targets
• Resizable — let users resize elements
• Selectable — click to select elements in a list
• Sortable — drag items to reorder a list

Widgets

• Accordion — expandable/collapsible content sections
• Autocomplete — type-ahead suggestion dropdown
• Button — styled, accessible buttons and button groups
• Datepicker — calendar popup for date selection
• Dialog — modal popup windows
• Menu — accessible navigation menus
• Progressbar — value and indeterminate progress bars
• Slider — draggable range slider
• Spinner — numeric input with up/down controls
• Tabs — tabbed content panels
• Tooltip — styled, accessible tooltips

Effects

• Extended animation effects: bounce, highlight, shake, puff, slide, clip
• Color animation — animate CSS color properties
• addClass/removeClass with animation

How to Include jQuery UI

Order: jQuery core first, then jQuery UI JS, then jQuery UI CSS

<!-- jQuery UI CSS (themes) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQuery core -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Diagram: Loading Order

  1. jquery-ui.css      → styles for all widgets
  2. jquery.min.js      → jQuery core (required by UI)
  3. jquery-ui.min.js   → jQuery UI components
  4. your-script.js     → your code using UI methods

Hello World — Datepicker Widget

HTML:
<input type="text" id="myDate" placeholder="Pick a date" />

jQuery:
$(document).ready(function() {
    $("#myDate").datepicker();
});

One line of jQuery code turns a plain text input into a fully functional calendar date picker with keyboard navigation and accessibility built in.

Hello World — Dialog Widget

HTML:
<div id="alertBox" title="Notice">
    <p>Your changes have been saved.</p>
</div>
<button id="openDialog">Show Notice</button>

jQuery:
$(document).ready(function() {
    $("#alertBox").dialog({ autoOpen: false });

    $("#openDialog").click(function() {
        $("#alertBox").dialog("open");
    });
});

Hello World — Sortable List

HTML:
<ul id="sortableList">
    <li>Task A</li>
    <li>Task B</li>
    <li>Task C</li>
</ul>

jQuery:
$(document).ready(function() {
    $("#sortableList").sortable();
});

Users can now drag the list items to reorder them — with no additional code.

ThemeRoller — Custom Themes

jQuery UI provides an online tool called ThemeRoller at jqueryui.com/themeroller. You choose colours, fonts, and corner styles, then download a complete custom CSS theme. Drop the downloaded CSS file into your project and all jQuery UI widgets instantly match your brand.

Download Builder — Include Only What You Need

jQuery UI's full build is large. The Download Builder at jqueryui.com/download lets you select only the components you need and download a custom build — keeping your page load fast.

Quick Summary

• jQuery UI extends jQuery with ready-made interactions, widgets, and effects.
• Load jQuery first, then jQuery UI JS, and include jQuery UI CSS for widget styles.
• Widgets like Datepicker, Dialog, Accordion, and Tabs require only one line of jQuery code.
• Use ThemeRoller to generate custom visual themes.
• Use the Download Builder to keep your bundle size small by selecting only needed components.

Accessibility Built In

Every jQuery UI widget is built with WAI-ARIA attributes, keyboard navigation, and focus management. Datepicker responds to arrow keys. Dialogs trap focus inside them. Tabs switch with arrow keys. This saves hours of manual accessibility work that plain HTML and jQuery alone cannot provide without extra effort.