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
    });
});

---

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.

---

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.

---

Common Mistakes to Avoid

---

Try It: A Basic Slider Widget

A second example — a slider that updates a text field live as the user drags it:

<div id="volumeSlider"></div>
<p>Volume: <span id="volumeValue">50</span></p>

<script>
    $(function() {
        $("#volumeSlider").slider({
            value: 50,
            min: 0,
            max: 100,
            slide: function(event, ui) {
                $("#volumeValue").text(ui.value);
            }
        });
    });
</script>

---

Frequently Asked Questions