Updated June 30, 2023
Introduction to jQuery UI
jQuery UI is a well-organized set of important user interface interactions, animated visual effects, widgets, and themes built on top of the jQuery JS Library to develop visually appealing and highly interactive web applications. It is an open-source jQuery JS Library free of any cost with very low maintenance and high power for easy web development.jQuery UI uses jQuery, CSS, and HTML to implement various interactions and features.
What is jQuery UI?
- jQuery UI is a collection of various user interface interactions, animation effects, widgets, and themes implemented using jQuery, CSS, and HTML.
- It is a free and open-source library built on the jQuery JavaScript Library.
- Being lightweight, fast, and easy to use, it is one of the most popular and powerful JS libraries for developing highly interactive web applications.
We categorize it into four groups.
- Interactions: Set of plug-ins that enable the users to interact with DOM elements, for instance, drag, drop, resize, etc.
- Widgets: jQuery plug-ins that help create user interface elements like date-picker, progress bar, accordion, etc.
- Effects: Built on top of internal jQuery effects, they contain a complete set of custom animation effects for DOM elements.
- Utilities: Modular tools such as Position and Widget Factory are used by jQuery UI internally.
Importance of jQuery UI
- jQuery UI has a significant role in web development for its rich features and stability.
- The animation effects, widgets, and interaction feature make it an ideal choice for web development.
- The most important feature of UI is that it is an open-source and free-to-use library that can easily meet various authorization requirements for any enterprise product.
- The library offers extensive browser support, compatible with almost all major browsers.
- Being lightweight and fast to use, it allows loading on-demand, which helps save bandwidth and enhance performance.
- Additionally, it provides various themes, custom style rules, and animation visual effects, allowing web pages to become more interactive and visually appealing.
Uses
The primary step to use jQuery UI is to include jQuery UI source files in your code. You can use these files in either of the following ways.
- Using individual files from jQuery UI CDN.
- Using a download builder to install the files locally on your server.
- Using UI with AMD
- Using UI with Bower.
jQuery UI contains many small parts called widgets to maintain state and thus may have a bit different usage pattern than other jQuery plugins.
Example to Implement jQuery UI
Let us look at an example that implements the UI library to develop interactive web pages.
Code:
<!DOCTYPE html>
<head>
<title>jQuery UI Dialog Example</title>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#dialog").dialog();
});
</script>
<style>
#dialog {
width: 600px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 16px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="dialog" title="Dialog Box">
<p>
Dialog boxes are a great way of displaying information on a web page.
The dialog window can be moved, resized and closed with the 'x' icon by default.
</p>
</div>
</body>
</html>In the above example,
<linkrel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>- The First line in the above code adds a theme via CSS to make the UI look more stylish.
- The second line in the above code adds the jQuery library. It is required since UI is built on top of this library.
- The third line in the above code adds the UI library, which enables UI features to be available on the web page.
<script>
$(function () {
$("#dialog").dialog();
});
</script>- The above code is the content written inside the head tag.
- This opens the content in an interactive overlay.
<body>
<div id="dialog" title="Dialog Box">
<p>
Dialog boxes are a great way of displaying information on a web page.
The dialog window can be moved, resized and closed with the 'x' icon by default.
</p>
</div>
</body>- The code above is added in the body section of the code.
Output:
- The above code execution results in the display of the following screen.
- Each UI widget has a default configuration. You can use options to override the default settings to set a plugin to non-default values.
- For example, a progressbar() widget has options like disabled, max, and value.
$("#progressbar").progressbar({
value: 20
});- You can pass more options, separating each option with a comma.
$("#progressbar").progressbar({
value: 20,
max:300
});Advantages
Here are the advantages as follows:
- Open-source and free-to-use JS library make it available to all users without concern about the license cost.
- It offers various animation effects, themes, and widgets that help make highly customized, interactive, and user-friendly web applications.
- Very stable library and needs very less maintenance.
- It is compatible with almost all browsers.
- Stable and Maintenance Friendly.
- This library helps simplify web development by providing robust widgets, interactions, and animation visual effects.
Conclusion
This article has discussed jQuery UI, its features, usage, and advantages in detail. Built on top of the jQuery JavaScript library, it offers various interaction features, widgets, and themes, all implemented using jQuery, HTML, and CSS. Developers widely use this library for developing highly interactive, customized, and visually appealing web UI.
Recommended Articles
We hope that this EDUCBA information on “jQuery UI” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
