JQuery UI Plugin Widgets

Mohit Kumar
Oct 07, 2015
4k
0
1
Article

JQuery UI Plugin Widgets Demos

In this article I will explain JQuery UI Widgets, for JQuery UI Interactions please visit:

Getting Started With jQuery UI Plugin

JQuery UI widget is a specialized JQuery plug-in. Widgets are full-featured UI controls that bring the richness of desktop applications to the Web.

All the JQuery UI Widgets Methods are as follows:

Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Selectmenu
Slider
Spinner
Tabs
Tooltip

Accordion

JQuery UI Accordion Widgets is a UI plugin method that can be used for broken informations into sections and we can see them like tabs. We are using Accordion() method for accordion widgets. By the use of this method we can represent information in a limited amount of space.

Example: In this example we can see how to use Accordion method for managing information for a little amount of space, information are stored into multiple section and each section can open afar clicking on new tab like the following example.

Demo Code:

<link href="Content/themes/base/accordion.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<script>
$(function() {
$("#AccordionDemo").accordion();
});
</script>
<body>
<form id="form1" runat="server">
<div id="AccordionDemo" style="background-color:gray; color:orange; border:2px solid; border-bottom-color:blue; margin-left:20%; margin-right:20%; margin-top:5%">
<h3 style="color:blue">Tab 1</h3>
<div>
<p>
JQuery UI Accordion Widgets is a JQuery based expandable and collapsible content holder that is broken into sections and look like as tabs.
We are using Accordion() method for accordion widgets. By the use of this method we can represent information in a limited amount of space.
</p>
</div>
<h3 style="color:blue">Tab 2</h3>
<div>
<p>
JQuery UI widget is a specialized JQuery plug-in.
Widgets are full-featured UI controls that bring the richness of desktop applications to the Web.
</p>
</div>
<h3 style="color:blue">Tab 3</h3>
<div>
<p>
JQuery UI enable our applications to have a cool user interface and animation in a faster way.
It is the set of plug-ins include interface interactions, effects, animations, widgets and themes built on the JavaScript Library.
JQuery is used to create Cohesive and Consistent APIs.
It is a method that we can use to extends JQuery prototype objects.
By that prototype object you can enable all jQuery objects to inherit any methods that you add.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</form>
</body>

Output:

Figure: Images before Accordion

Figure: Images after Accordion

Auto-complete

It is a widget which works like a suggestion while you type in the field.

Example: For demonstration while we type c in Textbox it suggests for choice like c#, c++, COBOL, etc.

Code:

<script type="text/javascript">
$(function() {
var availabletags = [
"c",
"C++",
"c#",
"COBOL",
"Turbo C",
"java",
"javascripts",
"jQuery",
"angularjs",
"nodejs"];
$("#tags").autocomplete({
source: availabletags
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="Autocomplete_Widgets" style=" margin-left:10%; margin-right:10%; margin-top:5%">
<label for="tags">Search: </label>
<input id="tags"/>
</div>
</form>
</body>

Output:

Figure: Images before Autocomplete

Figure: Images after Autocomplete

Button

This method is used for making button of any anchor, paragraph, heading, any input type, etc.

Example: In this example we can see how to use button method and the effect of this method.

Code:

<title>UI Button Widgets</title>
<style type="text/css">
a, button, p, h3,input[type=submit] {
background-color: blue;
color: white;
}
</style>
<body>
<button>A button element</button>
<input type="submit" value="A submit button"/>
<a href="#">An anchor</a>
<p>A Paragraph</p>
<h3> An Heading</h3>
</body>
$(function() {
$("input[type=submit], a, button, p, h3")
.button()
.click(function(event) {
event.button();
});
});
</script>
/head>
<body>
<button>A button element</button>
<input type="submit" value="A submit button"/>
<a href="#">An anchor</a>
<p>A Paragraph</p>
<h3> An Heading</h3>
</body>

Output:

Figure: Images before Button method

Figure: Images after Button method

Datepicker

In this method we can pick any date easily from calendar after clicking on the textbox.

Example: We should need to add a datepicker styling sheet like the following:

<link href="Content/themes/base/datepicker.css" rel="stylesheet" />

Datepicker Code:

<script type="text/javascript">
$(function() {
$("#datepickerdemo").datepicker();
});
</script>
<p>DatePicker: <input type="text" id="datepickerdemo" />
</p>

Output:

Figure: Image Datepicker method

Dialog

For the use of dialog we can use .dialog() method. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

Menu

A menu with the default configuration and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support.

Example: This example show the use of .menu() method and how elements are arranged in a list.

Code:

<link href="Content/themes/base/menu.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#menu").menu();
});

</script>
<style>
.ui-menu {
width: 150px;
border: 2px solid;
}
</style>

<body>
<form id="form1" runat="server">
<div>
<ul id="menu">
<li>Canada</li>
<li>America</li>
<li>Sri Lanka</li>
<li>India
<ul>
<li>Delhi</li>
<li>Uttar Prdesh
<ul>
<li>Merrut</li>
<li>Bijnor</li>
</ul>
</li>
<li>GOA</li>
</ul>
</li>
<li>Japan</li>
</ul>
</div>
</form></body>

Output:

Figure: Without using menu method

Figure: After Appling menu method

Progressbar

We can use Progressbar for showing the status bar. For example,

$(function() {
$("#progressbar").progressbar({
value: 50
});
});

Slider

This slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

You can use the following code

<script>
$(function() {
$("#slider").slider();
});
</script>
<body>
<div id="slider">
</div>
</body>

Spinner

Spinner widget methods to be used for adding a up/down arrow to the left of a input box providing the feature of increment/decrement a value in the input box and provides the features of enabling globalize formatting options (i.e. currency, thousand separator, decimals, etc.).

Example: In this example we are enhancing a text input for entering numeric values, with up/down buttons and arrow key handling.

Code: