Accordion Widget

The accordion widget organizes content into collapsible panels, optimizing space by displaying one panel at a time. Users interact with headers to toggle panel visibility, with smooth animations.

Structuring the Accordion

The basic markup consists of a container with header-content pairs. Example:

<div id="accordionContainer">
  <h2><a href="#">Panel Header 1</a></h2>
  <div>Content for Panel 1...</div>
  <h2><a href="#">Panel Header 2</a></h2>
  <div>Content for Panel 2...</div>
</div>

Initialize with jQuery:

$(document).ready(() => {
  $('#accordionContainer').accordion();
});

Dependencies: jquery.ui.all.css, jquery-2.0.3.js, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.accordion.js.

Customizing the Accordion

Apply custom styles by targeting classes like .ui-accordion-header and .ui-accordion-content. Example:

#accordionContainer {
  width: 450px;
  border: 1px solid #555;
}
#accordionContainer .ui-state-active {
  background: #f5f5f5;
}

Configuring Options

Options control behavior: active (default panel), animate (transition effects), collapsible (allow all panels closed), event (trigger), heightStyle (panel sizing), icons (custom icons). Example:

$('#accordionContainer').accordion({
  event: 'mouseenter',
  active: 1,
  collapsible: true,
  heightStyle: 'content',
  animate: {
    duration: 400,
    down: { easing: 'easeInOutCubic', duration: 800 }
  },
  icons: { header: 'ui-icon-chevron-right', activeHeader: 'ui-icon-chevron-down' }
});

Methods and Events

Methods: refresh (recompute heights), option (get/set config). Events: activate (after panel change), beforeActivate (before change), create (on init). Example:

$('#accordionContainer').accordion({
  activate: (e, ui) => {
    const newTitle = ui.newHeader.find('a').text();
    const oldTitle = ui.oldHeader.find('a').text();
    console.log(`${newTitle} is now open, ${oldTitle} is closed`);
  }
});

Dialog Widget

The dialog widget displays content in a floating window (modal/non-modal), supporting drag, resize, buttons, and animations.

Basic Dialog

Markup:

<div id="dialogBox" title="Dialog Title">
  Dialog content here...
</div>

Initialize:

$(document).ready(() => {
  $('#dialogBox').dialog();
});

Dependencies: jquery.ui.all.css, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.dialog.js, jquery.ui.button.js. Optoinal: jquery.ui.draggable.js, jquery.ui.resizable.js (for drag/resize).

Configuring Dialog

Options: autoOpen (show on load), modal (block background), buttons (custom actions), width, height, show/hide (animations). Example:

$('#dialogBox').dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    'Confirm': () => { $(this).dialog('close'); },
    'Cancel': () => { $(this).dialog('close'); }
  },
  show: { effect: 'slideDown', duration: 300 },
  hide: { effect: 'fadeOut', duration: 300 }
});

Events and Methods

Events: open, close, beforeClose. Methods: open(), close(), isOpen(). Example:

$('#dialogBox').dialog({
  beforeClose: () => {
    return confirm('Close this dialog?');
  }
});

Slider and Progress Bar Widgets

Slider Widget

The slider allows value selection (single/multiple handles) via drag.

Basic Slider

Markup:

<div id="valueSlider"></div>

Initialize:

$(document).ready(() => {
  $('#valueSlider').slider();
});

Dependencies: jquery.ui.all.css, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.slider.js.

Configuring Slider

Options: min, max, step (increment), orientation (vertical/horizontal), range (multiple handles), values (array for handles). Example:

$('#valueSlider').slider({
  min: -100,
  max: 100,
  step: 10,
  orientation: 'vertical',
  values: [30, 70],
  range: true
});

Events and Methods

Events: slide, change, start, stop. Methods: value() (get/set value), values() (multiple handles). Example:

$('#valueSlider').slider({
  slide: (e, ui) => {
    console.log(`Current value: ${ui.value}`);
  }
});

Progress Bar Widget

The progress bar visualizes task completion.

Basic Progress Bar

Markup:

<div id="taskProgress"></div>

Initialize:

$(document).ready(() => {
  $('#taskProgress').progressbar({
    value: 60
  });
});

Dependencies: jquery.ui.all.css, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.progressbar.js.

Configuring Progress Bar

Options: value (completion %), max (total). Events: change, complete. Example:

$('#taskProgress').progressbar({
  change: () => {
    const progress = $(this).progressbar('option', 'value');
    console.log(`Task progress: ${progress}%`);
  }
});

Summary

This guide explores jQuery UI 1.10 widgets: Accordion (collapsible panels), Dialog (floating windows), Slider (value selection), and Progress Bar (task feedback). Each widget offers extensive customization via options, events, and methods, enabling interactive, accessible UI components.