Introduction to jQuery UI
In this page:
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?
<!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="date">Pick a date</div>
<script>
$("#date").datepicker();
</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
<!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>
<button id="btn">Styled Button</button>
<script>
$("#btn").button();
</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
<!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>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
<!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>
<button id="btn">Themed Button</button>
<script>
// Swapping the linked jquery-ui.css theme file changes this button's look with no JS changes
$("#btn").button();
</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
<!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="Basic dialog">Dialog content</div>
<script>
$("#dialog").dialog();
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: