jQuery UI Introduction

Introduction

jQuery UI is an abbreviation for jQuery User Interface. It is a set of animated visual effects, graphical user interface widgets, and themes built with jQuery, CSS, HTML, and JavaScript.

These new plug-ins greatly expand the capabilities of the jQuery core library. It is a well-known and strong mobile-first front-end framework that is used for quicker and easier web development. According to a study, it is used on over 176000 websites, making it the Web's second most used JavaScript library.

jQuery UI History

jQueryUI is a free and open-source software that was first published in September 2007. The jQuery foundation distributes it under the MIT license. On September 17, 2007, jQuery was initially released. Following that, more versions with enhanced functionality were launched.

jQuery UI Release History

The above table shows the number of versions released from the date of launch till 2015 for reference.

Features

JqueryUI is divided into four categories: interactions, widgets, effects, and utilities. These will be covered in depth in the next chapters.

• Interactions are interactive plugins such as drag, drop, resize, and others that allow the user to interact with DOM elements.
• Widgets - Using widgets, which are jQuery plugins, you can construct user interface elements like an accordion, a datepicker, and so on.
• Effects are based on the internal jQuery effects. They include a comprehensive set of custom animations and transitions for DOM elements.
• Utilities are a collection of modular utilities that the JqueryUI library employs internally.

jQuery UI Interactions

1. jQuery UI Draggable

To make any DOM element draggable, use the draggable() method provided by jQueryUI. You can move an element once it is draggable by clicking on it with the mouse and dragging it anywhere on the screen.

Syntax:

There are two ways to use the draggable() method.

• $(selector, context).draggable (options) Method
• $(selector, context).draggable ("action", [params]) Method

2. jQuery UI Droppable

The droppable() method in jQueryUI allows you to make any DOM element droppable at a particular target (a target for draggable elements).

Syntax:

There are two ways to use the droppable() method.

• $(selector, context).droppable (options) Method
• $(selector, context).droppable ("action", params) Method

3. jQuery UI Resizable

To resize any DOM element, jQueryUI provides the resizable() function. This method streamlines element resizing, which would otherwise require time and a lot of writing in HTML. The resizable() method displays a resize icon in the bottom right corner of the object.

Syntax:

There are two ways to use the resizable() method.

• $(selector, context).resizable (options) Method
• $(selector, context).resizable ("action", params) Method

4. jQuery UI Selectable

To select DOM elements individually or in groups, jQueryUI provides the selectable() function. Elements can be selected using this method by dragging a box (also known as a lasso) with the mouse over the elements. Furthermore, numerous (non-contiguous) choices of an element can be made by clicking or dragging it while holding down the Ctrl or Meta key.

Syntax:

There are two ways to use the selectable() method.

• $(selector, context).selectable (options) Method
• $(selector, context).selectable ("action", params) Method

5. jQuery UI Sortable

To rearrange elements in a list or grid using the mouse, jQueryUI provides the sortable() function. Based on the operation string provided as the first parameter, this method executes the sortability action.

Syntax: There are two ways to use the sortable() method.

• $(selector, context).sortable (options) Method
• $(selector, context).sortable ("action", [params]) Method

jQuery UI Widgets

1. jQuery UI Accordion

Accordion Widget in jQueryUI is a jQuery-based expandable and collapsing content container that is separated into sections and presumably looks like tabs. To accomplish this, jQueryUI provides the accordion() method.

Syntax:

There are two ways to use the accordion() method.

• $(selector, context).accordion (options) Method
• $(selector, context).accordion ("action", params) Method

2. jQuery UI Autocomplete

Auto-completion is a technology commonly employed in modern websites to offer the user a list of options for the beginning of a word typed in a text box. The user can then choose an item from the list to display in the input area. This function eliminates the need for the user to enter a whole word or combination of words.

The autocomplete() method in jQueryUI generates a list of suggestions below the input field and applies new CSS classes to the items in question to give them the proper styling.

Syntax:

There are two ways to use the autocomplete() method.

• $(selector, context).autocomplete (options) Method
• $(selector, context).autocomplete ("action", params) Method

3. jQuery UI Button

jQueryUI provides the button() method to transform HTML elements (such as buttons, inputs, and anchors) into themeable buttons with automatic mouse movement management, all managed transparently by jQuery UI.

Button additionally has an additional widget called Buttonset for grouping radio buttons. Buttonset is invoked by selecting a container element (that contains the radio buttons) and invoking .buttonset().

Syntax:

There are two ways to use the button() method.

• $(selector, context).button (options) Method
• $(selector, context).button ("action", params) Method

4. jQuery UI Dialog

Dialog boxes are an attractive way of displaying information on an HTML page. A dialogue box is a floating window that has a title and content. This window can be dragged, resized, and closed by clicking the "X" icon. The dialogue() method of jQueryUI translates the HTML code written on the website into HTML code to display a dialogue box.

Syntax:

There are two ways to use the dialogue() method.

• $(selector, context).dialog (options) Method
• $(selector, context).dialog ("action", [params]) Method

5. jQuery UI DatePicker

Datepickers in jQueryUI allow users to simply and visually enter dates. The datepicker() method in jQueryUI creates a datepicker and modifies the appearance of HTML components on a page by adding new CSS classes. The wrapped set's input, div, and span components are converted into a datepicker control.

Syntax:

There are two ways to use the datepicker() method.

• $(selector, context).datepicker (options) Method
• $(selector, context).datepicker ("action", [params]) Method

6. jQuery UI Menu

A menu widget often has the main menu bar with pop-up menus. An anchor element is present in each menu item. The Menu Widget in jQueryUI can be used to create inline and popup menus, as well as a foundation for more complicated menu systems. You can, for example, create layered menus with specific positioning. To create a menu, use the menu() functions provided by jQueryUI.

Syntax:

There are two ways to use the menu() method.

• $(selector, context).menu (options) Method
• $(selector, context).menu ("action", params) Method

7. jQuery UI Progressbar

Progress bars show the percentage of an operation or process that has been completed. There are two types of progress bars: determinate progress bars and indeterminate progress bars. jQueryUI provides a simple progress bar widget that we may use to notify users that our application is busy doing the requested operation. To build progress bars, use the progressbar() method provided by jQueryUI.

Syntax:

There are two ways to use the progressbar() method.

• $(selector, context).progressbar (options) Method
• $(selector, context).progressbar ("action", params) Method

8. jQuery UI Tabs

The tabs() technique provided by jQueryUI significantly alters the appearance of HTML components within the page. This method examines (internally in jQuery UI) HTML code and adds new CSS classes to the items in question (here, the tabs) to style them.

Syntax:

There are two ways to use the tabs() approach.

• $(selector, context).tabs (options) Method
• $(selector, context).tabs ("action", params) Method

9. jQuery UI ToolTip

The tooltip() method in jQueryUI allows you to add a tooltip to any element that you want to display a tooltip on. When compared to simply toggle the visibility, this provides a fade animation by default to show and conceal the tooltip.

Syntax:

There are two ways to use the tooltip() method.

• $(selector, context).tooltip (options) Method
• $(selector, context).tooltip ("action", [params]) Method

10. jQuery UI Slider

A slider is used to obtain a numeric number within a specific range. The advantage of a slider over text input is that the user cannot enter an incorrect value. Any value they can select using the slider is valid. Through the slider widget, jQueryUI gives us a slider control. The slider() method of jQueryUI alters the appearance of HTML components on the page by adding new CSS classes that give them the proper style.

Syntax:

There are two ways to use the slider() approach.

• $(selector, context).slider (options) Method
• $(selector, context).slider ("action", params) Method

**11. jQuery UI Spinner **

The Spinner widget adds an up/down arrow to the left of an input box, allowing users to increment or decrement the value in the input box. It allows users to immediately type a value or edit an existing value by spinning the keyboard, mouse, or scroll wheel. It also includes a step capability for skipping values.

In addition to basic numeric functionality, it supports international formatting options (for example, currency, thousand separators, decimals, and so on), resulting in a simple internationally competitive masked entry box.

Syntax:

There are two ways to use the spinner() method.

• $(selector, context).spinner (options) Method
• $(selector, context).spinner ("action", params) Method

jQuery UI Effects

1. jQuery UI Hide

One of the ways used to manage jQueryUI visual effects is the hide() function. To hide components, the effect() function uses an animation effect.

Syntax:

The syntax for the hide() method is as follows:

2. jQuery UI Show

One of the methods used to handle jQueryUI visual effects is the show() function The show() method displays an object with the specified effect.

Syntax:

The syntax for the display() method is as follows:

3. jQuery UI Add Class

One of the techniques used to handle jQueryUI visual effects is the addClass() function. The addClass() method allows you to animate changes to CSS properties. While animating all style changes, the addClass() function adds specified classes to the matched components.

Syntax:

The basic syntax of the addClass() method is as follows:

4. jQuery UI Remove Class

One of the techniques used to handle jQueryUI visual effects is the removeClass() function. The removeClass() method removes the classes that have been assigned to the items. While animating all style changes, the removeClass() function removes the provided classes from the matched components.

Syntax:

The removeClass() function has the following basic syntax:

5. jQuery UI Switch Class

The switchClass() method, which creates a new easily manipulated class, switches from one CSS class to another, animating the transition from one state to the next.

Syntax:

The switchClass() function has the following basic syntax:

6. jQuery UI Toggle Class

The toggleClass() method, which creates a new manipulable class, adds or removes one or more classes from each matched member in the set.

Syntax:

The toggleClass() function has the following basic syntax:

7. jQuery UI Color Animation

jQueryUI extends certain core jQuery methods in order to animate various transitions for an element. The animate technique is one of them. jQueryUI adds color animation functionality to the jQuery animate method.

You can animate one of the numerous CSS properties that define the color of an element. The animation function supports the CSS properties listed below.

Syntax:

The syntax of the jQueryUI animation method is as follows:

8. jQuery UI Effect

One of the methods used to handle jQueryUI visual effects is the effect() function. The effect() method applies an animation effect to the items without requiring them to be shown or hidden.

Syntax:

The syntax for the effect() method is as follows:

9. jQuery UI Toggle

jQueryUI visual effects toggle() method The toggle() function toggles the show() or hide() methods based on whether or not the element is hidden.

Syntax:

The syntax for the toggle() method is as follows:

jQuery UI Utilities

1. jQuery.Extend()

Combine the contents of two or more things into the first.

Syntax:

2. jQuery.inArray()

Return the index of a provided value located within an array (or -1 if not found).

Syntax:

3. jQuery.isEmptyobject()

Check to see if an item is empty (contains no enumerable properties).

Syntax:

4. jQuery.isPlainobject()

Determine whether an item is a plain object (made with "" or "new Object").

Syntax:

5. jQuery.isXMLDoc()

Check whether a DOM node is contained within an XML document (or is an XML document). Syntax:

6. jQuery.makearray()

Convert a JavaScript array-like object to an actual array.

Syntax:

7. jQuery.merge()

Combine the contents of two arrays into the first array.

Syntax:

8. jQuery.parseHTML()

A string is parsed into an array of DOM elements.

Syntax:

9. jQuery.parseXML()

XML document created by parsing a string.

Syntax:

10. jQuery.uniqueSort()

Sorts an array of DOM elements in place, removing duplicates. It should be noted that this only works on DOM element arrays, not texts or numbers. Syntax:

Basic Overview: Using jQuery UI on a Web Page

Before going into setting up, first download the Builder, which is available online with a lot of customizable settings, and so on. Once you get to download the files you selected, open index.html in a text editor from the downloaded bundle. You'll notice that it makes use of your theme, jQuery, and jQuery UI.

To use the jQuery UI widgets and interactions, you must include the following three files on any page:

You can now add some jQuery widgets to your page after you've included the relevant files. To create a datepicker widget, for example, add a text input element to your page and then call .datepicker() on it. As an example:

For HTML:

For JavaScript:

And that’s it, you're good to go.

Customizing jQuery UI to Your Needs

You may change the jQuery UI in a variety of ways. You've previously seen how the Download Builder lets you edit your copy of jQuery UI to include only the parts you want, but there are other methods to tailor that code to your specific implementation.

jQuery UI Basics: Using Options

Each jQuery UI plugin includes a default setup that corresponds to the most basic and popular use case. If you wish a plugin to operate differently than it does by default, you can override each of its default parameters with "options."

Options are a collection of properties that can be supplied as an argument to a jQuery UI widget. For example, the slider widget offers an orientation option that lets you choose whether the slider should be horizontal or vertical.

To enable this option for a slider on your page, simply give it in as an argument, as seen below: