jQuery UI — Complete Widgets & Interactions Guide
jQuery UI provides a set of professional user interface widgets, interactions, effects, and themes built on top of jQuery, enabling drag-and-drop, sortable lists, date pickers, dialog boxes, and more.
What You’ll Learn
- How to install and include jQuery UI
- How to use interaction helpers: draggable, droppable, resizable, sortable
- How to use UI widgets: accordion, tabs, dialog, datepicker, autocomplete
- How to customize jQuery UI with ThemeRoller themes
- How to use jQuery UI effects and easings
- Common jQuery UI mistakes and best practices
Why jQuery UI Matters
jQuery UI gives you professional UI components without building them from scratch. Instead of writing a custom date picker with hundreds of lines of JavaScript, you call .datepicker() and get a fully functional, accessible, themeable widget. Think of it like buying pre-built furniture instead of carving each chair by hand. At DodaTech, jQuery UI widgets power dashboard date range selectors, sortable scan result tables, and modal dialogs for configuration panels.
Security note: Understanding Jquery Ui helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.
jQuery UI Learning Path
flowchart LR
A[jQuery Basics] --> B[jQuery Events]
B --> C[jQuery Effects]
C --> D[jQuery UI: You Are Here]
D --> E[Interactions]
D --> F[Widgets]
D --> G[Theming]
E --> H[Rich Web Applications]
F --> H
How jQuery UI Works
jQuery UI is an extension library. You include its CSS and JavaScript files after jQuery. Each widget is activated by calling a method on a jQuery selection:
$("#element").widgetName(options);The widget transforms your existing HTML into a rich interactive component. For example, <div id="accordion"><h3>Title</h3><div>Content</div></div> becomes a fully functional accordion.
Installation
Include jQuery UI’s CSS and JS after jQuery:
<!-- jQuery UI CSS (theme) -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQuery (required) -->
<script src="//code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- jQuery UI JS -->
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>Interactions
Draggable
Make any element draggable with the mouse:
$("#draggable").draggable({
axis: "y", // Restrict to vertical only
containment: "parent", // Stay inside parent
handle: ".handle", // Only drag by this element
cursor: "move",
opacity: 0.8 // Make semi-transparent while dragging
});Droppable
Create a target where draggable elements can be dropped:
$("#droppable").droppable({
accept: "#draggable",
drop: function(event, ui) {
$(this).addClass("ui-state-highlight")
.find("p").html("Dropped!");
},
over: function() { $(this).addClass("ui-state-hover"); },
out: function() { $(this).removeClass("ui-state-hover"); }
});Resizable
Make elements resizable by dragging edges:
$("#resizable").resizable({
minWidth: 200,
minHeight: 150,
maxWidth: 600,
aspectRatio: 16 / 9 // Maintain aspect ratio
});Sortable
Create reorderable lists (drag items to rearrange):
$("#sortable").sortable({
placeholder: "ui-state-highlight",
update: function() {
var order = $(this).sortable("toArray");
console.log("New order:", order);
}
});Sortable is particularly useful for todo lists, playlist reordering, and admin panel drag-to-reorder interfaces.
Widgets
Accordion
Convert headers and content panels into an accordion:
$("#accordion").accordion({
active: 1, // Second section open by default
collapsible: true, // Allow all sections to close
heightStyle: "content" // Height based on content, not equalized
});HTML structure required:
<div id="accordion">
<h3>Section 1</h3>
<div><p>Content for section 1.</p></div>
<h3>Section 2</h3>
<div><p>Content for section 2.</p></div>
<h3>Section 3</h3>
<div><p>Content for section 3.</p></div>
</div>Tabs
Create tabbed interfaces:
$("#tabs").tabs({
active: 0,
event: "mouseover", // Switch tab on hover instead of click
collapsible: true,
heightStyle: "fill" // Fill available height
});Dialog
Create modal dialog windows:
$("#dialog").dialog({
autoOpen: false, // Don't open on page load
modal: true, // Block interaction with page behind it
buttons: {
OK: function() { $(this).dialog("close"); },
Cancel: function() { $(this).dialog("close"); }
},
width: 400,
show: "fade", // Open animation
hide: "slide" // Close animation
});
// Open the dialog
$("#open-dialog").click(function() {
$("#dialog").dialog("open");
});Datepicker
Add interactive date selection to input fields:
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd", // ISO format: 2026-06-06
minDate: 0, // No past dates
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "slideDown"
});Autocomplete
Suggest values as the user types:
var countries = [
"Afghanistan", "Albania", "Algeria",
"Andorra", "Angola", "Argentina"
];
$("#country").autocomplete({
source: countries, // Can also be a URL (AJAX source)
minLength: 2, // Start suggesting after 2 characters
select: function(event, ui) {
console.log("Selected:", ui.item.value);
}
});Progressbar
Display progress visually:
// Initialize at 50%
$("#progressbar").progressbar({ value: 50 });
// Update dynamically
function updateProgress(value) {
$("#progressbar").progressbar("option", "value", value);
}Theming with ThemeRoller
jQuery UI’s appearance is fully customizable through its ThemeRoller system:
<!-- Built-in theme -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<!-- Or override specific styles -->
<style>
.ui-widget { font-family: "Segoe UI", sans-serif; font-size: 14px; }
.ui-state-default { background: #4f46e5; color: white; }
.ui-state-hover { background: #4338ca; }
.ui-state-active { background: #1a73e8; }
</style>The ThemeRoller website (jqueryui.com/themeroller) lets you visually customize colors, corners, and fonts, then download a custom CSS file.
Widget Methods
Every jQuery UI widget provides a consistent API:
// Get/Set options
$("#widget").widgetName("option", "key", "value");
// Enable/Disable
$("#widget").widgetName("enable");
$("#widget").widgetName("disable");
// Destroy (revert to original HTML)
$("#widget").widgetName("destroy");
// Refresh (update after DOM changes)
$("#widget").widgetName("refresh");jQuery UI Effects
jQuery UI extends the core effects with additional animations:
// Extended effects
$("#box").effect("bounce", { times: 3, distance: 20 }, 500);
$("#box").effect("pulsate", { times: 3 }, 500);
$("#box").effect("shake", { times: 3, distance: 10 }, 500);
$("#box").effect("explode", { pieces: 16 }, 500);
$("#box").effect("highlight", { color: "#ffff99" }, 1000);
$("#box").effect("transfer", { to: "#target" }, 500);
// Extended easings for .animate()
$("#box").animate({ left: "200px" }, 1000, "easeOutBounce");
$("#box").animate({ left: "200px" }, 1000, "easeInOutElastic");Available easings include: easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInBounce, easeOutBounce, easeInElastic, easeOutElastic, and more.
Common Mistakes
1. Forgetting to Include jQuery UI CSS
The widgets need the CSS to render correctly. Without the CSS, they work functionally but look unstyled.
2. Loading jQuery UI Before jQuery
jQuery UI depends on jQuery. The jQuery <script> tag must come first, then jQuery UI.
3. Not Destroying Widgets Before Updating HTML
If you change the inner HTML of a widget, call .widgetName("destroy") first, make changes, then re-initialize. Otherwise, the old widget events remain bound.
4. Using jQuery UI in Mobile Apps Without Touch Support
jQuery UI is desktop-oriented. For touch interaction, use jQuery UI Touch Punch or a mobile-first library.
5. Overriding Widget CSS Without Specificity
Widget CSS uses specific class names. When overriding, use equal or higher specificity:
/* Won't work (lower specificity) */
.ui-state-default { background: red; }
/* Works (same specificity, load after jQuery UI CSS) */
.ui-state-default { background: red; }Practice Questions
1. What files do you need to include for jQuery UI?
jQuery UI CSS, jQuery JS, then jQuery UI JS — in that order.
2. How do you make a datepicker that only accepts future dates?
$("#datepicker").datepicker({ minDate: 0 });3. What is ThemeRoller?
A visual theme builder for jQuery UI that lets you customize colors, fonts, and corners through a web interface and download the generated CSS.
4. How do you prevent elements from being dragged outside their container?
$("#el").draggable({ containment: "parent" });5. Challenge: Create a sortable todo list where items can be reordered by dragging. After reordering, log the new order to the console.
Answer
<ul id="sortable-todos">
<li>Buy groceries</li>
<li>Write report</li>
<li>Call dentist</li>
</ul>
<script>
$(function() {
$("#sortable-todos").sortable({
update: function() {
var order = $(this).sortable("toArray");
console.log("New order:", order);
}
});
});
</script>FAQ
Try It Yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI Playground</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
body { font-family: system-ui, sans-serif; max-width: 700px; margin: 40px auto; }
.draggable { width: 100px; height: 100px; background: #1a73e8; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: move; margin: 10px 0; }
.droppable { width: 200px; height: 150px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.droppable.hover { border-color: #1a73e8; background: #e3f2fd; }
.ui-state-highlight { background: #c8e6c9 !important; }
#sortable { list-style: none; padding: 0; }
#sortable li { padding: 8px 12px; margin: 4px 0; background: #f5f5f5; border-radius: 4px; cursor: move; }
#sortable li:hover { background: #e3f2fd; }
section { margin: 24px 0; padding: 16px; background: #fafafa; border-radius: 8px; }
h2 { margin-top: 0; }
</style>
</head>
<body>
<h1>jQuery UI Playground</h1>
<section>
<h2>Draggable & Droppable</h2>
<div class="draggable" id="drag1">Drag me</div>
<div class="droppable" id="drop1">Drop here</div>
</section>
<section>
<h2>Sortable List</h2>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</section>
<section>
<h2>Datepicker</h2>
<input type="text" id="datepicker" placeholder="Select a date...">
</section>
<section>
<h2>Dialog</h2>
<button id="open-dialog">Open Dialog</button>
<div id="dialog" title="Hello" style="display:none;">
<p>This is a jQuery UI dialog box!</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
$("#drag1").draggable({ revert: true });
$("#drop1").droppable({
drop: function() { $(this).addClass("ui-state-highlight").text("Dropped!"); },
over: function() { $(this).addClass("hover"); },
out: function() { $(this).removeClass("hover"); }
});
$("#sortable").sortable({ update: function() { console.log($(this).sortable("toArray")); } });
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: 0 });
$("#dialog").dialog({ autoOpen: false, modal: true, buttons: { OK: function() { $(this).dialog("close"); } } });
$("#open-dialog").click(function() { $("#dialog").dialog("open"); });
});
</script>
</body>
</html>What’s Next
| Topic | Description |
|---|---|
| https://tutorials.dodatech.com/frameworks/jquery/jquery-advanced/ | Advanced jQuery: plugins, deferred, performance |
| https://tutorials.dodatech.com/frameworks/jquery/jquery-ajax/ | Load data dynamically for widget content |
| https://tutorials.dodatech.com/frameworks/jquery/jquery-reference/ | Complete jQuery API reference |
| CSS | CSS theming and custom styles |
| JavaScript | JavaScript OOP patterns for widget customization |
What’s Next
Congratulations on completing this Jquery Ui tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro