Essential UI Widgets
In this page:
Datepicker
The datepicker widget attaches a pop-up calendar to an input field so users can pick a date visually instead of typing one in a specific format, which reduces input errors and makes date entry far more user-friendly.
Example: Datepicker
<!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>
</head>
<body>
<input id="date">
<script>
$("#date").datepicker();
</script>
</body>
</html>Dialog
The dialog widget displays content in a movable, often modal window that floats above the rest of the page, and it can be opened and closed programmatically or by the user. It's commonly used for confirmations, forms, and alerts that shouldn't be part of the main page flow.
Example: Dialog
<!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>
</head>
<body>
<div id="dialog" title="Confirm">Are you sure?</div>
<script>
$("#dialog").dialog();
</script>
</body>
</html>Tabs
The tabs widget organizes related content into separate panels that share one visible area, letting users switch between them by clicking a tab label instead of scrolling through everything at once. This is a common pattern for settings pages and detailed product information.
Example: Tabs
<!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>
</head>
<body>
<div id="tabs">
<ul><li><a href="#tab1">One</a></li><li><a href="#tab2">Two</a></li></ul>
<div id="tab1">Content 1</div>
<div id="tab2">Content 2</div>
</div>
<script>
$("#tabs").tabs();
</script>
</body>
</html>Accordion and Autocomplete
The accordion widget shows expandable and collapsible sections, revealing one section's content at a time to save space. Autocomplete suggests matching values from a list as the user types into an input field, speeding up data entry for known values.
Example: Accordion and Autocomplete
<!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>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3><div>Content 1</div>
<h3>Section 2</h3><div>Content 2</div>
</div>
<input id="auto">
<script>
$("#accordion").accordion();
$("#auto").autocomplete({source: ["Apple", "Banana"]});
</script>
</body>
</html>Small Widget Project
These widgets are frequently combined to build complete forms and interfaces quickly — a dialog containing a datepicker and an autocomplete field, for instance — without writing custom interaction code for each piece.
Example: Small Widget Project
<!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>
</head>
<body>
<div id="dialog" title="Book Appointment">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog();
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: