JQueryUI - Day1

What is jQuery UI?



jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. UI stands for user-interface and the jQuery UI library provides a lot of user interface enhancements for your web site. Whether we are building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. jQuery uses HTML, CSS and JavaScript. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

jQuery UI component and functionality is divided into four major categories.

Interactions:

JQuery UI provides a set of mouse-based interactions as building blocks for rich interfaces and complex widgets. jQuery UI provides the following interactions: Draggable, Droppable, Resizable, Selectable, Sortable.

Widgets:

Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events. jQuery UI supports various types of widgets, some useful widgets are: Accordion, Autocomplete, Progressbar, Slider, Spinner, etc.

Effects:

JQuery UI adds quite a bit of functionality on top of jQuery's built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. jQuery UI provides rich effects that are Color Animation, Toggle Class, Drop, Fade, Flod, Highlight effects, etc.

Utilities:

These are a set of modular tools the JqueryUI library uses internally. jQuery UI provides position utilities to set an element's position relative to another element's position (alignment).

Features of jQuery UI:

Now we consider some reasons why we should use jQuery UI .

Require Single Library:

If you are already using the jQuery library then there is no need to bring another library. We can take advantage of all the widgets and interaction tools that jQuery UI supports without having to maintain and learn another library.

Efficient Documentation:

In jQuery each function and component have a full explanation and an example plus source code. jQuery library is always up to date and provides excellent documentation.

Open Source and Free to Use:

jQuery UI library are open source and free to use. A user can make changes in sources code according to his/her requirements.

Support Theming Mechanism:

jQuery supports theming mechanism which provides a great look to any website. jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs.

jQuery UI Environment Setup:

Now we discuss how to setup an environment for the jQuery UI. We have two ways to setup the environment,

1. Downloading jQuery UI libraries from CDNs.
2. Download jQuery UI libraries from official website.

Now we consider both methods to setup an environment.

Using libraries from CDNs:

A CDN (content delivery network) is a setup of servers that provide files and data to a user. We can use a CDN link in our web page. This method have some advantages that responsibilities are moved from our server to CDN server. If the user to our webpage has already downloaded a copy of JQuery UI from the same CDN, it won't have to be re-downloaded.

We can use any CDN as per our choice.

Google: