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.