EDUCBA

Home » Software Development » Software Development Tutorials » jQuery Tutorial » jQuery UI

jQuery UI

Introduction to jQuery UI

jQuery UI is a well organized set of some 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 that are implemented using jQuery, CSS, and HTML.
  • It is a free and open-source library built on top of the jQuery JavaScript Library.
  • Being lightweight, fast, and easy to use, jQuery UI is one of the most popular and powerful JS libraries to develop highly interactive web applications.

jQuery UI is categorized into four groups:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  1. Interactions: Set of plug-ins that enable the users to interact with DOM elements, for instance, drag, drop, resize, etc.
  2. Widgets: jQuery plug-ins that help in creating user interface elements like date-picker, progress bar, accordion, etc.
  3. Effects: Built on top of internal jQuery effects, they contain a complete set of custom animation effects for DOM elements.
  4. Utilities: Set of modular tools such as Position and Widget Factory used by jQuery UI internally.

Importance of jQuery UI

  • jQuery UI has a significant role to play in web development for its rich features and stability.
  • The animation effects, widgets, and interaction features, jQuery UI offers make it to be an ideal choice to opt for web development.
  • The most important feature of jQuery UI is that is open-source and free to use the library which can easily meet various authorization requirements related to any enterprise product.
  • jQuery UI offers extensive browser support being compatible with almost all the major browsers.
  • It is lightweight and fast to use and can be loaded only on-demand basis which helps in saving bandwidth hence, enhancing the performance.
  • jQuery UI offers a number of various kinds of themes, custom style rules, and animation visual effects to make the web pages look more interactive and visually appealing.

Uses of jQuery UI

The primary step to use jQuery UI is to include jQuery UI source files in your code. These files can be used either of the following ways.

  1. Using individual files from jQuery UI CDN.
  2. Using a download builder to install the files locally on your own server.
  3. Using jQuery UI with AMD
  4. Using jQuery UI with

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 now look at an example that implements the jQueryUI library to develop interactive web pages.

Example 1: Following is a very simple example to demonstrate the power of jQueryUI.

<!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 jQuery UI 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 jQuery UI is built on top of this library.
  • The third line in the above code adds jQuery UI library which enables jQuery 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 above code is added in the body section of the code.

Output:

  • The below screen displays when the above code gets executed.

jQuery UI Example 1

  • Each jQuery UI widget has a default configuration. To make a plugin to be set to non-default values, options can be used to override the default settings.
  • For example, a progressbar() widget has options like disabled, max, and value.

$("#progressbar").progressbar({
value: 20
});

  • More options can also be passed each separated by a comma.

$("#progressbar").progressbar({
value: 20,
max:300
});

Advantages of jQuery UI

Below mentioned are the advantages of using jQuery UI.

  • jQuery UI is an open-source and free to use the JS library which makes it available to all the users without concern about the license cost.
  • It offers a wide range of animation effects, themes, and widgets which help in making highly customized interactive and user-friendly web applications.
  • jQuery UI is a very stable library and needs very less maintenance.
  • It is compatible with almost all browsers.
  • Stable and Maintenance Friendly.
  • The jQuery UI library helps in simplification of web development by providing robust widgets, interactions, and animation visual effects.

Conclusion

In this article, we have discussed in detail, what is jQuery UI, its features, its usage and advantages. jQuery UI is built on top of jQuery JavaScript library, offering various interaction features, widgets and themes, implemented using jQuery, HTML and CSS is one of the popular libraries used for the highly interactive, customized and visually appealing web UI development.

Recommended Articles

This is a guide to jQuery UI. Here we discuss a Brief Overview on jQuery UI and its Importance, Uses, Advantages, Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –

  1. Introduction to jQuery toggle()
  2. jQuery empty() (Examples)
  3. How to Use jQuery insertAfter() Method?
  4. jQuery appendTo() | Parameters | Examples
0 Shares
Share
Tweet
Share