Open In App

jQuery UI Introduction

Last Updated : 04 Mar, 2022
Like Article

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Features: jQueryUI is categorized into four groups, interactions, widgets, effects, utilities. These will be discussed in detail in the subsequent chapters. The structure of the library is as shown in the image below −

  • Interactions − These are the interactive plugins like drag, drop, resize and more which give the user the ability to interact with DOM elements.
  • Widgets − Using widgets which are jQuery plugins, you can create user interface elements like accordion,datepicker etc.
  • Effects − These are built on the internal jQuery effects. They contain a full suite of custom animations and transitions for DOM elements.
  • Utilities − These are a set of modular tools the JqueryUI library uses internally.

jQuery UI Categories

1) Interactions: Interactions is a set of mouse-based instructions used as building blocks for rich interfaces and complex widgets. These are the mostly used interactions:

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

2) Widgets: Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events. These are the most used widgets:

  • Accordion
  • Autocomplete
  • Dialog
  • Button
  • Date Picker
  • Menu
  • Progress Bar
  • Tabs
  • Tooltip
  • Slider
  • Spinner

3) Effects: The internal jQuery effects contain a full suite of custom animation and transition for DOM elements. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings.

  • Hide
  • Show
  • Add Class
  • Remove Class
  • Switch Class
  • Toggle Class
  • Color Animation
  • Effect
  • Toggle

4) Utilities: 

  • Position: It is used to set the position of the element.

Previous Article
Next Article

Similar Reads

jQuery | Introduction
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript deve
3 min read
jQuery Plugins Introduction
Plugins are the section of code and these codes are written in a JavaScript file. These JavaScript files are used to provide jQuery methods that work together with jQuery library methods. You can download jQuery plug-in from How to create a jQuery plugin with methods: In Jquery Plug-in is a code that is needed in a standa
2 min read
jQuery Mobile Introduction
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. jQuery Mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique applications for each mobile device or OS, the jQuery mobile framework all
2 min read
Easy UI jQuery Introduction
Easy UI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Features: We don't need to write much javascript code while using Easy UI; instead, you usually define the user interf
2 min read
jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery Property
The property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery Property
The property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read
jQuery jquery Property
The jquery property is used to return the jQuery version number. Syntax $().jqueryExample: Return the version number. C/C++ Code <!DOCTYPE html> <html> <head> <style> h1 { color: green; } </style> <script src= ""> </script> <script
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
Practice Tags :