Customizing jQuery UI
In this page:
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
<!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({minDate: 0});
</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
<!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">Save</button>
<script>
$("#btn").button({icon: "ui-icon-disk"});
</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
<!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="Settings">Options</div>
<script>
$("#dialog").dialog({modal: true, width: 400});
</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
<!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="Pick a date">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog({resizable: true});
</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
<!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="Schedule">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog({modal: true});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: