Lesson 9 – jQuery Widgets

jQuery has a number of built-in widgets you can use to add different functionalities to your website. For example, the calendar widget will enable you to include a calendar on your web page without writing any extra piece of code. These widgets are actually specialized jQuery plugins.

The following table contains the details of all the jQuery widgets.

S. No Widget Description
1 Accordion Breaks down the content into logical, collapsible sections
2 Button It is an anchor and input of type submit
3 Autocomplete Autocompletes suggestions to autocomplete the query
4 Dialog Makes presenting the information nicer and attractive
5 Datepicker Opens an interactive calendar in a small overlay
6 Menu  It shows a list of items
7 Select Menu Opens a style able element or elements
8 Progress Bar Creates a progress bar showing progress information
9 Slider Creates a horizontal slider on the web page
10 Spinner Enables you to select a single value from a set
11 Tabs Enables you to select content from different logical sections
12 Tooltip Provides tips for users

Let us see how we can add these widgets to the web page. We are going to enable the Accordion widget in out example. It is extremely simple to add a widget to your web page. All you have to do is to go to the widget’s dedicated page in jQuery’s official website, copy the source code and place it in the code editor of your choice. That’s it.

Visit the Accordion’s page to copy the source code as shown in the following image. Our example contains 2 paragraphs which will be converted into an accordion. The parent div element should also have an id with value of accordion for the widget to work properly. Here is the actual code you need to write.

<!doctype html>
<html lang="en">
<head>
  
  <link rel="stylesheet" href="//code.jQuery.com/ui/1.12.1/themes/base/jQuery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <title>jQuery Widgets</title>
  [block]0[/block]
  [block]1[/block]
  
  $( function() {
    $( "#accordion" ).accordion();
  } );
  
</head>
<body>
 

Section 1

This is paragraph one.

<h3>Section 2</h3>

This is paragraph two.

</div> </body> </html>

Congratulation, you have embedded a fully functional accordion to your website.

In the next lesson, we will discuss jQuery utilities.