jQuery UI Widgets

Widgets are full-featured user interface components that have a specific behavior and visual style. They are designed to save you hundreds of hours of coding by providing ready-to-use, accessible elements like calendars, sliders, and collapsible panels.

1. The Datepicker (Calendar)

This is arguably the most popular widget. It attaches an interactive calendar to a normal input field.

// Simple Initialization
$("#birthday").datepicker();

// Custom configuration
$("#appointment").datepicker({
    showAnim: "slideDown",
    numberOfMonths: 2,
    dateFormat: "dd/mm/yy"
});

2. The Accordion

The Accordion widget turns a series of headers and content panels into a collapsible menu where only one section is open at a time.

$(function() {
    $("#myAccordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
});

3. Tabs

The Tabs widget allows you to organize large amounts of content into small, clickable sections.

$(function() {
    $("#myTabs").tabs({
        event: "mouseover" // Open tabs on hover instead of click
    });
});

Common Structure: Most jQuery UI widgets require a specific HTML structure (e.g., specific ID tags or list structures) to function correctly. Always consult the official documentation for the required markup.

Configuration via Options

Every widget in jQuery UI can be customized by passing an options object during initialization. This allows you to change how it looks or behaves without editing the core library.

Widget	Popular Options
Slider	`min, max, value, range, step`
Autocomplete	`source, minLength, delay`
Dialog	`modal, buttons, resizable, title`

Pro Tip: You can change options after a widget is initialized using the option method:
$("#slider").slider("option", "max", 500);

Key Points to Remember

Widgets are interactive UI components built on jQuery.
They require initialization (e.g., `.datepicker()`).
Custom behavior is achieved by passing an object { } to the widget function.
Most widgets have built-in events like `change`, `select`, or `open`.
Using widgets ensures a consistent user experience across your entire application.

« Previous Lesson Next Lesson »