Back to Curriculum

jQuery UI Widgets

📚 Lesson 11 of 15 ⏱️ 50 min

jQuery UI Widgets

50 min

jQuery UI provides a set of user interface interactions, effects, widgets, and themes.

Common widgets include accordion, autocomplete, datepicker, dialog, and slider.

jQuery UI themes provide consistent styling across all widgets.

Exercise

Create a jQuery UI accordion and a datepicker widget.

$(document).ready(function() {
  // Initialize accordion
  $('#accordion').accordion({
    collapsible: true,
    active: 0
  });
  
  // Initialize datepicker
  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '1900:2025'
  });
  
  // Initialize autocomplete
  $('#autocomplete').autocomplete({
    source: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
  });
});

Code Editor

Output