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

Customizing jQuery UI

jQuery UI widgets accept options. Options let you change behavior without changing the library.

In this page:

  1. Customize Widget Options
  2. Customize Buttons
  3. Customize Dialogs
  4. Combine Widgets
  5. Small Custom UI Project
Syntax
javascript 
$("selector").widgetName({
  option: value,
  anotherOption: value
});

Customize Widget Options

Most jQuery UI widgets accept a configuration object at initialization that lets you override their default behavior and appearance — for example, setting a datepicker's minimum selectable date or a dialog's starting size. Options are the primary way to customize a widget without editing its source.

Example: Customize Widget Options

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({minDate: 0});
    });

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

Customize Buttons

The button widget gives plain buttons and links a consistent visual style across browsers, and it supports icons and different visual states like disabled or pressed, which is harder to achieve consistently with plain HTML buttons alone.

Example: Customize Buttons

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">Save</button>

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

    $("#runBtn").click(function() {
      $("#btn").button({icon: "ui-icon-disk"});
    });

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

Customize Dialogs

Dialog options control size, starting position, whether the dialog blocks interaction with the rest of the page (modal), and what happens when it opens or closes — giving you fine control over how a popup window behaves without writing custom logic.

Example: Customize Dialogs

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="Settings">Options</div>

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

    $("#runBtn").click(function() {
      $("#dialog").dialog({modal: true, width: 400});
    });

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

Combine Widgets

Multiple jQuery UI widgets can work together on the same page — a resizable dialog containing a datepicker, for example — and combining a handful of widgets like this can produce a fairly complete interface with comparatively little custom code.

Example: Combine Widgets

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="Pick a date">
      <input id="date">
    </div>

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

    $("#runBtn").click(function() {
      $("#date").datepicker();
      $("#dialog").dialog({resizable: true});
    });

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

Small Custom UI Project

A fully customized jQuery UI page typically combines several widgets, one or more interactions like draggable or sortable, and consistent easing on any animated transitions, all styled through a shared theme for a cohesive look.

Example: Small Custom UI 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="Schedule">
      <input id="date">
    </div>

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

    $("#runBtn").click(function() {
      $("#date").datepicker();
      $("#dialog").dialog({modal: true});
    });

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

Essential UI Widgets · Introduction to jQuery UI · Custom Transitions and Easing · Interaction Helpers

{# 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. Passing options after initialization by calling .dialog({ width: 600 }) again, when it should be set with .dialog("option", "width", 600).
  2. Setting modal: true on a dialog and forgetting a way to close it, such as a buttons option, leaving the page blocked.
  3. Using .button() on elements and expecting the theme to work without the jQuery UI CSS, so the buttons look plain.
Chapter Summary
  • jQuery UI adds interaction helpers and widgets on top of jQuery.
  • Essential widgets provide ready-made interface components.
  • Custom transitions and easing, and customization, adjust how it looks and moves.
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Custom Transitions and Easing Next Lesson → Integrating Existing Plugins

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.