Widget in jQuery
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.
| Sr.No. | Widgets & Description |
|---|---|
| Accordion | Enable to collapse the content, that is broken into logical sections. |
| Autocomplete | Enable to provides the suggestions while you type into the field. |
| Button | Button is an input of type submit and an anchor. |
| Datepicker | It is to open an interactive calendar in a small overlay. |
| Dialog | Dialog boxes are one of the nice ways of presenting information on an HTML page. |
| Menu | Menu shows list of items. |
| Progressbar | It shows the progress information. |
| Select menu | Enable a style able select element/elements. |
| Slider | The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys. |
| Spinner | It provides a quick way to select one value from a set. |
| Tabs | It is used to swap between content that is broken into logical sections. |
| Tooltip | Its provides the tips for the users. |
Accordion
The Widget accordion function can be used with widgets in JqueryUI.Accordion is same like as Tabs,When user click headers to expand content that is broken into logical sections.
<html lang = "en"><head>
<title> jQuery UI Accordion - Default functionality </title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id = "accordion">
<h3>Android</h3>
<div>
<p>
Android is an open source and Linux-based operating system for
mobile devices such as smartphones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<h3>CSS </h3>
<div>
<p>
CSS is the acronym for "Cascading Style Sheet". This
tutorial covers both the versions CSS1,CSS2 and CSS3,
and gives a complete understanding of CSS,
starting from its basics to advanced concepts.
</p>
</div>
<h3>Angular JS </h3>
<div>
<p>
AngularJS is a very powerful JavaScript library. It is used in
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to
user actions. AngularJS is open source, completely free,
and used by thousands of developers around the world.
It is licensed under the Apache license version 2.0.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>PHP </h3>
<div>
<p>
The PHP Hypertext Preprocessor (PHP) is a programming language
hat allows web developers to create dynamic content that
interacts with databases. PHP is basically used for developing
web based software applications. This tutorial helps you to
build your base with PHP.
</p>
<p>
Before proceeding with this tutorial you should have at least basic
understanding of computer programming, Internet, Database, and
MySQL etc is very helpful.
</p>
</div>
</div>
</body>
</html>
AutoComplete
The Widget AutoComplete function can be used with widgets in JqueryUI.The Autocomplete widgets provides suggestions while you type into the field
<html lang="en">
<head>
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<p>Available Courses:</p>
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
jQuery Button
<html lang="en"><head>
<title>jQuery UI Autocomplete - Default functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
<script>
$(function() {
$( "#button-1, #button-2, #button-3, #button-4" ).button();
$( "#button-5" ).buttonset();
});
</script>
</head>
<body>
<button id="button-1">A button element</button>
<input id="button-2" type="submit" value="A submit button">
<a id="button-3" href="">An anchor</a>
<input type="checkbox" id="button-4" >
<label for="button-4">Toggle</label>
<div id="button-5">
<input type="checkbox" id="check1">
<label for="check1">Left</label>
<input type="checkbox" id="check2">
<label for="check2">Middle</label>
<input type="checkbox" id="check3">
<label for="check3">Right</label>
</div>
</body>
</html>
Datepicker
<html lang="en"><head>
<title>jQuery UI Datepicker functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker-1" ).datepicker();
});
</script>
</head>
<body>
<p>Enter Date: <input type="text" id="datepicker-1"></p>
</body>
</html>
jQuery Dialog
<html lang="en">
<head>
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-1" title="jQuery">"jQuery is a JavaScript Library" </div>
<button id="opener">Open Dialog</button>
</body>
</html>