My Web Training

📖 jQuery Widgets

Widgets

jQuery provides a library of helpful widgets designed to enhance the user experience by creating useful and appealing user interface devices. This article demonstrates how to use jQuery widgets.

Dialog

The dialog widget creates a floating window with a title and content area very similar to the alert() box that can be moved, resized and closed using 'x' icon. You can find a tutorial at http://www.tutorialspoint.com/jqueryui/jqueryui_dialog.htm

Steps to create a dialog box.

Create a div element that contains the contents of the dialog box.
Assign an id to the div so that you can select it.
Add a title attribute to the div that will display as the title of the dialog box.
```
<div id="dialog1" title="My Dialog Box">My dialog contents</div>
```

In the JavaScript, call the dialog() method for the element.

$(document).ready(function() {
	$('#dialog1').dialog();
});

This will create a simple dialog box.

Options

You can customize the box using options. be sure to select options available for the jQuery UI function you are using. A list of options for each jQuery UI widget is available in the jQuery UI API Docs.

$('#dialog1').dialog({
	resizable: false,
	height: "auto",
	width: 400
});

You can also assign the options to a variable and pass the variable to the function.

var options = {
	resizable: false,
	height: "auto",
	width: 400
};
$('#dialog1').dialog(options);

Tooltips

The tooltips widget Replaces native tooltips with customized tooltips. You can find a tutorial at http://www.tutorialspoint.com/jqueryui/jqueryui_tooltip.htm

Steps to create a customized tooltip.

Add a title tag to any element you want to have a tooltip.
```
<div id="tooltip1" title="My Tool Tip"></div>
```
In the JavaScript, call the tooltip() method for the element.
```
$('#tooltip1').tooltip();
```

This will create a simple tooltip. You can customize the tooltip using options.

Accordion

An accordion allows you to group content into separate panels which can be opened or closed by visitor interaction. You can find a tutorial at https://www.tutorialspoint.com/jqueryui/jqueryui_accordion.htm. Each container has a heading element associated with it that is used to open the container and display the content. When you click on a heading its content will slide into view below it. The currently visible content is hidden while the new content is shown when you click on another heading.

To create an accordion effect.

Create a div with an id to contain all of the panels
```
<div id="accordionDiv"></div>
```
Inside the div, add the headers and panels
For the headers, create an h1-h6 element wrapped around a link for each:
```
<h3><a href="#">Heading Text</a></h3>
```
Immediately below each header, create a div that contains the content for the panel:
```
<div>
	<p>This is the content for this panel . . .</p>
</div>
```
Add the JavaScript in the head section to add the accordion effect:
```
$('#accordionDiv').accordion();
```
If you want to customize some options for the accordion, you can add them in a variable before you call the accordion function:
```
var accOpts = {
	collapsible: true,
	active: false
	};
$('#accordionDiv').accordion(accOpts);
```

You can also customize the look by adding css for the following classes:
.ui-accordion
.ui-accordion-header
.ui-widget-content
.ui-corner-top
.ui-corner-bottom
.ui-corner-all
.ui-state-active
.ui-state-hover

Use navigation: true in options to create an accordion menu.

Datepicker

The Datepicker allows the user to select a date from a calendar instead of keying it in. You can find a tutorial start page: https://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm

Create text form field for date and give it an id

<input type="text" id="startdate" name="startdate" />

Add the datepicker widget to the field.
```
$('#startdate').datepicker();
```

You can pass optional configuration values if desired.

var pickerOpts = {
	appendText: "mm/dd/yyyy",
	defaultDate: "+5",
	showOtherMonths: true
};
$('#startdate').datepicker(pickerOpts);

Tabs

The tabs widget is used to toggle visibility across a set of different elements. Each element containing content that can be accessed by clicking on its heading with appears as an individual tab. You can find a tutorial at https://www.tutorialspoint.com/jqueryui/jqueryui_tabs.htm

Create a div to contain the tabs and content and give it an id.
```
<div id="tabs">
</div>
```
Create the tabs by placing them in an unordered list with an id. Each tab is in an <li> element which consists of a link to the id of the associated content and the name of the tag.
```
<ul>
	<li><a href="#div1">Tab 1</a></li>
	<li><a href="#div2">Tab 2</a></li>
	<li><a href="#div3">Tab 3</a></li>
	<li><a href="#div4">Tab 4</a></li>
<ul>
```

Create the content for each tab in an element with the id referred to in the tab.

<div id="div1">Div 1 content</div>
<div id="div2">Div 2 content</div>
<div id="div3">Div 3 content</div>
<div id="div4">Div 4 content</div>

Add the tabs widget to the div.
```
$('#tabs').tabs();
```
If you want to customize some options for the tabs, you can add them in a variable before you call the tab function.
```
var tabOpts = {
	event: "mouseover",
	selected: 1
}
$('#tabs').tabs(tabOpts);
```
You can also customize the look by adding css for the following classes.
.ui-tabs
.ui-widget
.ui-widget-content
.ui-corner-top
.ui-corner-bottom
.ui-corner-all
.ui-state-active
.ui-state-hover