← Back to jQuery Course | Chapter 13: jQuery UI | Lesson 1 of 5

Introduction to jQuery UI

jQuery UI is a collection of ready-made interface components. It works with jQuery and helps you build interactive pages.

In this page:

  1. What is jQuery UI?
  2. jQuery UI CSS
  3. First Interactive Widget
  4. Themes and Appearance
  5. Small Introduction Project
Syntax
javascript 
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-ui.js"></script>

$("selector").widgetName(options);

What is jQuery UI?

jQuery UI extends jQuery with a library of pre-built, themeable interface widgets like datepickers, dialogs, sliders, and tabs, saving you from building common interactive components from scratch. It's a separate library that depends on jQuery being loaded first.

Example: What is jQuery UI?

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="date">Pick a date</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

jQuery UI CSS

jQuery UI ships with a theme stylesheet that supplies the default visual styling for every widget — buttons, borders, spacing, and states like hover or disabled. Without including this CSS, the widgets will still function but will look unstyled and inconsistent.

Example: jQuery UI CSS

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="runBtn" class="btn" role="button">Run</span>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <button id="btn">Styled Button</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#btn").button();
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

First Interactive Widget

jQuery UI widgets turn plain HTML elements into richer interactive controls by calling a widget's initialization method on a jQuery selection, such as $('#date').datepicker(). Once initialized, the widget takes over rendering and behavior for that element.

Example: First Interactive Widget

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="date">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Themes and Appearance

A jQuery UI theme controls the colors, borders, spacing, and overall appearance every widget uses, and themes can be swapped out to completely change a page's look without touching any JavaScript. jQuery UI provides several official themes, or you can build a custom one.

Example: Themes and Appearance

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="runBtn" class="btn" role="button">Run</span>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <button id="btn">Themed Button</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      // Swapping the linked jquery-ui.css theme file changes this button's look with no JS changes
      $("#btn").button();
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Small Introduction Project

Several jQuery UI components can be combined on the same page — for example, a datepicker inside a dialog, or draggable items inside a sortable list — to build richer interactive interfaces than any single widget provides on its own.

Example: Small Introduction Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="dialog" title="Basic dialog">Dialog content</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#dialog").dialog();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Managing Multiple Async with when() · Promise Pipeline Methods · Creating and Resolving Deferred · Deferred States

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Loading the jQuery UI script but not its CSS theme, so widgets such as dialogs and datepickers appear unstyled or broken.
  2. Loading jQuery UI before jQuery itself, so $.fn is missing and calls like $("#box").draggable() throw an error.
  3. Confusing jQuery UI with core jQuery and expecting .datepicker() to exist with only the jQuery script loaded.
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Managing Multiple Async with when() Next Lesson → Interaction Helpers

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.