Updated April 14, 2023
Introduction to jQuery Widgets
jQuery Widgets are specialized, platform-independent, cross browser compatible, stateful plugins rich in features, with a full life cycle along with some methods and events, built on an extensible base called jQuery UI Widget Factory (facilitates state management and provides conventions for tasks such as exposing plugin methods, changing options after instantiation, thus, allowing us to make some here and there changes in the existing functionality of the jQuery Widgets). And in combination with animated visual effects, CSS, HTML, and jQuery themes, form a complete jQuery UI, thus, taking JavaScript and HTML UI development to a completely new level and becoming one of the fastest growing JavaScript UI frameworks.
Top jQuery Widgets
Following is the list of few important and commonly used jQuery Widgets which we are going to discuss in detail.
1. Accordion Widget
This jQuery widget enables to collapse the content which is broken into multiple logical sections. Accordions are basically used to break the content into logical sections that can be swapped so as to save the space.
Syntax:
$(function(){
$("#accordion").accordion();
});2. Autocomplete Widget
This jQuery widget provides the suggestions while typing into the field thus enabling the users to easily find and make a selection from a pre-populated list of values. This widget makes the maximum use of searching and filtering to its advantage.
Syntax:
$(#tags).autocomplete({
Source: availableTags
});3. Button Widget
This widget is helpful in enhancing the design and customizing the form elements such as buttons, inputs and anchors to themeable buttons with some CSS styles. The button is basically is an input of type submit and an anchor.
Syntax:
$(function(){
$("input[type = submit], a, button")
.button()
.click(function(event){
event.preventDefault();
});
});4. Datepicker Widget
This widget is used to open and select date from an interactive calendar. By default, the calendar opens in a small overlay when the related text field gets focus.
Syntax:
$("#datepicker").datepicker();5. Dialog Widget
This widget is used when you want to open the content in an interactive overlay. Using dialog boxes to show the content on a page is a very nice way to do so.
Syntax:
$("#dialog").dialog();6. Menu Widget
This widget is used to show a list of items with customization such as adding themes, mouse, and keyboard navigation support, and other styles.
Syntax:
$("#menu").menu();7. Progressbar Widget
This widget is used to show progress information or the status of a process.
Syntax:
$("#progressbar").progressbar({
value:numericValue
});8. Select the Menu Widget
This widget is used to enable a style able replacement for select elements so as to overcome the limitations of native control by duplicating and extending the functionality of a native HTM select element.
Syntax:
$(#menu).selectmenu();9. Slider Widget
This widget helps users to select a numeric value by just dragging a handle. The slider which we are talking about here is horizontal having a single handle that can be dragged using the mouse or the arrow keys.
Syntax:
$(#slider).slider();10. Spinner Widget
This widget allows the users to quickly select a value from a set and enhancing the text input for entering numeric values, with up/down buttons and arrow keys.
Syntax:
$(#spinner).spinner();11. Tabs Widget
This widget provides a single content area with multiple panels, where, each panel is associated with a header in a list and is used to swap between the logical sections which the content is broken into.
Syntax:
$(#tabs).tabs();12. Tooltip Widget
This widget provides customizable tooltips which can be a replacement for the native tooltips.
A tooltip basically provides tips to the users.
Syntax:
$(document).tooltip();Examples to Implement jQuery Widgets
Let us look at a few examples to understand the implementation of jQuery Widgets.
Example #1
Let us consider an example to understand how the Accordion Widget is implemented.
Code:
<!DOCTYPE html>
<head>
<title>jQuery UI Accordion Widget Example</title>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#accordion").accordion();
});
</script>
<style>
#divstyle {
width: 800px;
height: 150px;
}
</style>
</head>
<body>
<div id="divstyle">
<div id="accordion">
<h3>jQuery</h3>
<div>
<p>
A light weight, fast JavaScript library, rich in features which
makes JavaScript programming easier. It facilitates DOM traversal
and manipulation, event handling, animation and AJAX much simpler .
</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>
jQuery UI is a combination of a set of user interface interactions,
effects, themes and widgets, which is built on top of jquery JS
library.
</p>
</div>
<h3>jQuery UI Effects</h3>
<div>
<p>
jQuery UI Effects are the features provided by the jQuery library to
add various animation effects to a web page. Also, there are custom
effects available for showing or hiding elements to add some visual
effects.
</p>
</div>
<h3>jQuery UI Widgets</h3>
<div>
<p>
jQuery Widgets are specialized, platform independent, cross browser
compatible, stateful plugins rich in features, with a full life
cycle along with some methods and events, built on an extensible
base called jQuery UI Widget Factory
</p>
<p>
A few jQuery UI Widgets are listed below.
</p>
<ul>
<li>
Accordion Widget
</li>
<li>
Autocomplete Widget
</li>
<li>
Button Widget
</li>
<li>
Datepicker Widget
</li>
</ul>
</div>
</div>
</div>
</body>
</html>Output:
- Below screen displays when the above code gets executed.
- You can click the headers to expand the content, broken into logical sections, as shown below.
Example #2
Here us another example illustrating the implementation of Dialog Widget.
Code:
<!DOCTYPE html>
<head>
<title>jQuery UI Dialog Example</title>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#dialog").dialog();
});
</script>
<style>
#dialog {
width: 600px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 16px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="dialog" title="Dialog Box">
<p>
Dialog boxes are a great way of displaying information on a web page.
The dialog window can be moved, resized and closed with the 'x' icon by default.
</p>
</div>
</body>
</html>Output:
- Below screen displays when the above code gets executed.
- As you can see, a dialog box is a floating window with a title and information. It can be moved, resized and closed using “X’ icon.
Conclusion
In this article, we discussed about the various jQuery UI Widgets which are basically stateful plugins built upon jQuery Widget Factory providing rich features to make the web pages more interactive.
Recommended Articles
This is a guide to jQuery Widgets. Here we discuss a Brief Overview on jQuery Widgets and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
