jQuery UI - Widgets

Introduction to jQuery Widgets

A customized jQuery plug-in is a jQuery UI widget. We can apply behaviours to the elements by using a plug-in. However, plug-ins lack several built-in capabilities, such as the ability to associate data with its elements, expose methods, combine options with defaults, and govern the lifetime of the plug-in.

To begin, we'll make a progress bar that only allows us to set the progress once. This is accomplished by invoking jQuery. widget() with two parameters: the name of the plugin to be created and an object literal containing functions to support our plugin, as seen below.

When our plugin is called, it creates a new plugin instance, and all functions are executed within that context. This is distinct from a typical jQuery plugin in two ways. First and foremost, the context is an object, not a DOM element. Second, the context is never a collection but always a single object.

The plugin's name must include a namespace In this case, we've used the custom namespace. Because you can only construct one level deep namespaces, custom.progressbar is a legitimate plugin name but very.custom.progressbar is not.

We can also see that the widget factory provided us with two characteristics. this.element is a jQuery object that contains only one element.

When we execute our plugin on a jQuery object with several elements, a distinct plugin instance is created for each element, and each instance has its own this.element.

this.options is a hash that contains key-value pairs for all of our plugin's settings. As illustrated here, these options can be supplied to our plugin.

When we call jQuery.widget(), we are adding a function to jQuery.fn (the system for creating a standard plugin). The function it adds is named after the name you supply to jQuery.widget(), minus the namespace - in our example, "progressbar".

The values supplied in this.options within our plugin instance are the parameters passed to our plugin.

We can give default values for any of our choices, as seen below. When building your API, consider the most typical use case for your plugin so that appropriate default settings may be provided and all choices are really optional.

About Widgets

jQuery UI - Accordion Widget

jQueryUI widgets can be utilized using the Widget accordion function. Accordions work similarly to tabs in that users click headers to expand the content that has been divided into logical portions.

Syntax

Here is a simple syntax for using Accordion:

Example:

jQuery UI - AutoComplete Widget

The Widget AutoComplete feature in JqueryUI can be used with widgets. While you type into the field, the Autocomplete widgets present suggestions. For example, if you enter Ja as an input, it will return an output in the form of Java or JavaScript.

Syntax:

Here is the basic syntax for using Autocomplete.

Example:

jQuery UI - Button Widget

jQueryUI widgets can be utilized with the Widget button function. The button is both a submit input and an anchor.

Syntax:

Here is the basic syntax for using Button:

Example:

jQuery UI - DatePicker Widget

The Widget DatePicker function can be used with jQueryUI widgets. The input is focused on opening an interactive calendar in a little overlay.

Syntax:

Here is the basic syntax for using DatePicker.

Example:

jQuery UI - Dialog Widget

jQueryUI widgets can be utilized with the Widget Dialog function.

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.

Syntax:

Here is the basic syntax for using Dialog.

Example:

jQuery UI - Menu Widget

jQueryUI widgets can be utilized with the Widget Menu function. A simple menu displays a list of items. A list is modified by adding themes, mouse and keyboard navigation, and other features.

Syntax:

Here is the basic syntax for using the menu option:

Example:

When you run the above code, you can click on "Item 3" to see the sub-items.

jQuery UI - ProgressBar Widget

jQueryUI widgets can use the Widget Progress Bar function. A simple progress bar displays data about progress. A basic progress bar is provided below.

Syntax:

Here is a simple syntax for using a progress bar.

Example:

jQuery UI - Select Menu Widget

The Widget Select Menu function in jQueryUI can be used with widgets. It provides a replaceable select element that may be styled. A simple select menu is illustrated below.

Syntax:

Here is the easy syntax for using Select Menu:

Example:

jQuery UI - Slider Widget

jQueryUI widgets can be utilized with the Widget Slider function. The slider is horizontal in orientation and has a single handle that may be manipulated with the mouse or the arrow keys.

Syntax:

Here is the basic syntax for using Slider.

Example:

jQuery UI - Spinner Widget

jQueryUI widgets can be utilized with the Widget Spinner function. Spinners allow you to quickly select one value from a set.

Syntax

Here is the basic syntax for using Spinner:

Example:

jQuery UI - Tab Widget

jQueryUI widgets can be utilized with the Widget Tab function. The TAB key is used to navigate between content that is divided into logical portions.

Syntax:

Here is the basic syntax for using tabs.

Example:

jQuery UI - Tooltip Widget

The Widget Tooltip method in jQueryUI can be used with widgets. The tooltip is used to display the tips.

An example of a tooltip is presented below.

Syntax:

Here is a simple syntax for using Tooltip.

Example: