jQuery UI - Widgets
FREE
Overview
jQuery widgets are specialized, platform-independent, cross-browser compatible, stateful plugins with a full life cycle and certain methods and events, built on an extensible foundation known as the jQuery UI Widget Factory.
The jQuery UI Widget Factory facilitates state management. It provides conventions for tasks such as exposing plugin methods, and changing options after instantiation, thus, allowing us to make some here-and-there changes in the existing functionality of the jQuery Widgets.
And when combined with animated visual effects, CSS, HTML, and jQuery themes build a comprehensive jQuery UI, bringing JavaScript and HTML UI creation to a whole new level and propelling it to the top of the JavaScript UI framework charts.
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.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
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:
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
Turn Learning into Career Growth
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:
Conclusion
- We examined the various jQuery UI Widgets in this article, which are effectively stateful plugins built on the jQuery Widget Factory that provides extensive functionality to make web pages more dynamic.
- You can now play with the given code examples to understand the working of the various jQuery UI widgets.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more