Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial post, we will be discussing about the JQuery UI widgets which was introduced to you guys in our last tutorial guide.
Widget accordion
Widget accordion function can be used with the widgets in JQueryUI. Accordion is the same like Tabs, when a user clicks on header to expand content that is broken into logical sections.
Syntax
Below is the syntax to use this method -
$( function( ) {
$( "#accordion" ).accordion( );
} );
$( "#accordion" ).accordion( );
} );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#accordion" ).accordion( );
} );
</script>
</head>
<body>
<div id = "accordion">
<h3>Android</h3>
<div>
<p>
Android is an open source and Linus-based operating for
mobile devices such as smart phones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<h3>Angular JS</h3>
<div>
<p>
Angular Js is a very powerful JavaScript library. It is used in a
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user
actions. Angular JS is open source, completely free, and used by
thousands of developers around the world.
</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 is a is a programming language
that allow web developers to develop 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
knowledge of Computer Programming, Internet, Database, and finally
MYSQL.
</p>
</div>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#accordion" ).accordion( );
} );
</script>
</head>
<body>
<div id = "accordion">
<h3>Android</h3>
<div>
<p>
Android is an open source and Linus-based operating for
mobile devices such as smart phones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<h3>Angular JS</h3>
<div>
<p>
Angular Js is a very powerful JavaScript library. It is used in a
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user
actions. Angular JS is open source, completely free, and used by
thousands of developers around the world.
</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 is a is a programming language
that allow web developers to develop 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
knowledge of Computer Programming, Internet, Database, and finally
MYSQL.
</p>
</div>
</div>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED Post: Learn JQuery Widgets - Complete List
Widget AutoComplete
The Widget AutoComplete can be used with the widgets in JQueryUI. This widget provides you different suggestions while you type into a field. For example, if you type Ja as your input, it provides Java or JavaScript as the output.
Syntax
Below is the syntax to use this method -
$( "#tags" ).autocomplete( {
source: availableTags
} );
source: availableTags
} );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( 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">
<label for = "tags">Tags: </label>
<input id = "tags">
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( 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">
<label for = "tags">Tags: </label>
<input id = "tags">
</div>
</body>
</html>
Output
Below is the output of the above example -
Widget Button
The Widget Button function can be used with the widgets in JQueryUI. Button is an input of type submit and an anchor.
Syntax
Below is the syntax to use this method -
$( function( ) {
$( "input [ type = submit ], a, button " )
.button( )
.click( function( event ) {
event.preventDefault( );
} );
} );
$( "input [ type = submit ], a, button " )
.button( )
.click( function( event ) {
event.preventDefault( );
} );
} );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "input [ type = submit ], a, button " )
.button( )
.click( function( event ) {
event.preventDefault( );
} );
} );
</script>
</head>
<body>
<button>A button element</button>
<input type = "submit" value = "A submit button">
<a href = "#">An anchor</a>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "input [ type = submit ], a, button " )
.button( )
.click( function( event ) {
event.preventDefault( );
} );
} );
</script>
</head>
<body>
<button>A button element</button>
<input type = "submit" value = "A submit button">
<a href = "#">An anchor</a>
</body>
</html>
Output
Below is the output of the above example -
RECOMMENDED POST: JQuery UI Interactions - Complete Guide
Widget DatePicker
Widget DatePicker function can be used with widgets in JQueryUI. It is focus on the input to open an interactive calendar in a small spot of calender overlay.
Syntax
Below is the syntax to use this method -
$( #datepicker" ).datepicker( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#datepicker" ).datepicker( );
} );
</script>
</head>
<body>
<p>Date: <input type = "text" id = "datepicker"></p>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#datepicker" ).datepicker( );
} );
</script>
</head>
<body>
<p>Date: <input type = "text" id = "datepicker"></p>
</body>
</html>
Output
Below is the output of the above example -
Widget Dialog
The Widget Dialog function can be used with the widgets in JQueryUI. Dialog boxes are one of the best ways of presenting information on a HTML page. A dialog box is a floating window with the title and content area. This floating window can be moved, resized, and also closed by clicking on the X icon by default.
Syntax
Below is the syntax to use this method -
$( #dialog" ).dialog( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#dialog" ).dialog( );
} );
</script>
</head>
<body>
<div id = "dialog" title = "Dialog Box">
<p>This is a default dialog box which is useful for
displaying information. This dialog box window can
moved, resized, as well as closed using the X icon.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#dialog" ).dialog( );
} );
</script>
</head>
<body>
<div id = "dialog" title = "Dialog Box">
<p>This is a default dialog box which is useful for
displaying information. This dialog box window can
moved, resized, as well as closed using the X icon.</p>
</div>
</body>
</html>
You try the above code out to see the result for yourselves.
RECOMMENDED: JQuery UI Library Methods
Widget Menu
The Widget Menu function can be used with widgets in JQueryUI. A very simple menu shows a list of items. A list is transformed, adding theming, mouse and the keyboard navigator support.
Syntax
Below is the syntax to use this method -
$( #menu" ).menu( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#menu" ).menu( );
} );
</script>
<style>
.ui-menu { width: 180px; }
</style>
</head>
<body>
<ul id = "menu">
<li class = "ui-state-disabled">Names</li>
<li>Kennedy</li>
<li>Webmaster</li>
</li>Precious</li>
<li>Promise
<ul>
<li class = "ui-state-disabled">Kelvin</li>
<li>Peter</li>
<li>Paul</li>
</ul>
</li>
<li>Grace</li>
<li>Martins
<ul>
<li>Faith
<ul>
<li>Tobi</li>
<li>Tosin</li>
<li>Segun</li>
</ul>
<li>
<li>Michael
<ul>
<li>Joy</li>
<li>Prince</li>
<li>Peace</li>
</ul>
</li>
<li>David</li>
</ul>
</li>
<li class = "ui-state-disabled">Queen</li>
</ul>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#menu" ).menu( );
} );
</script>
<style>
.ui-menu { width: 180px; }
</style>
</head>
<body>
<ul id = "menu">
<li class = "ui-state-disabled">Names</li>
<li>Kennedy</li>
<li>Webmaster</li>
</li>Precious</li>
<li>Promise
<ul>
<li class = "ui-state-disabled">Kelvin</li>
<li>Peter</li>
<li>Paul</li>
</ul>
</li>
<li>Grace</li>
<li>Martins
<ul>
<li>Faith
<ul>
<li>Tobi</li>
<li>Tosin</li>
<li>Segun</li>
</ul>
<li>
<li>Michael
<ul>
<li>Joy</li>
<li>Prince</li>
<li>Peace</li>
</ul>
</li>
<li>David</li>
</ul>
</li>
<li class = "ui-state-disabled">Queen</li>
</ul>
</body>
</html>
You try the above code out to see the result for yourselves.
Widget ProgressBar
Widget ProgressBar function can be used with widgets in JQueryUI. A simple progress bar shows the information progress.
Syntax
Below is the syntax to use this method -
$( #progressbar" ).progressbar( {
value: 50
} );
value: 50
} );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#progressbar" ).progressbar( {
value: 50
} );
} );
</script>
</head>
<body>
<div id = "progressbar"></div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#progressbar" ).progressbar( {
value: 50
} );
} );
</script>
</head>
<body>
<div id = "progressbar"></div>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: The Definitive Guide to jQuery Effects
Widget Select Menu
Widget Select Menu function can be used with widgets in JQueryUI. It gives a styleable select element replacement.
Syntax
Below is the syntax to use this method -
$( #menu" ).selectmenu( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#speed" ).selectmenu( );
$( "#files" ).selectmenu( );
$( "number" ).selectmenu( ).selectmenu( "menuWidget" ).addClass( "overflow" );
} );
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 25px 0 0 0;
}
select {
width: 150px;
}
.overflow {
height: 150px;
}
</style>
</head>
<body>
<div class = "demo">
<form action = "#">
<fieldset>
<label for = "speed">Select a speed</label>
<select name = "speed" id = "speed">
<option>Slower</option>
<option>Slow</option>
<option selected = "selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<label for = "file">Select a file</label>
<select name = "file" id = "file">
<optgroup label = "Scripts">
<option value = "jquery">jQuery.js</option>
<option value = "jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label = "Other files">
<option value = "somefile">Some unknown file</option>
<option value = "someotherfile">Some other file with a
very long option text</option>
</optgroup>
</select>
<label for = "number">Select a number</label>
<select name = "number" id = "number">
<option>1</option>
<option selected = "selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#speed" ).selectmenu( );
$( "#files" ).selectmenu( );
$( "number" ).selectmenu( ).selectmenu( "menuWidget" ).addClass( "overflow" );
} );
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 25px 0 0 0;
}
select {
width: 150px;
}
.overflow {
height: 150px;
}
</style>
</head>
<body>
<div class = "demo">
<form action = "#">
<fieldset>
<label for = "speed">Select a speed</label>
<select name = "speed" id = "speed">
<option>Slower</option>
<option>Slow</option>
<option selected = "selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<label for = "file">Select a file</label>
<select name = "file" id = "file">
<optgroup label = "Scripts">
<option value = "jquery">jQuery.js</option>
<option value = "jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label = "Other files">
<option value = "somefile">Some unknown file</option>
<option value = "someotherfile">Some other file with a
very long option text</option>
</optgroup>
</select>
<label for = "number">Select a number</label>
<select name = "number" id = "number">
<option>1</option>
<option selected = "selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
Output
Below is the output of the above example -
Widget Slider
The Widget Slider function can be used with the widgets in JQueryUI. The slider is horizontal and has a single handle that can be moved with the mouse or the arrow keys.
Syntax
Below is the syntax to use this method -
$( #slider" ).slider( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#slider" ).slider( );
} );
</script>
</head>
<body>
<div id = "slider"></div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#slider" ).slider( );
} );
</script>
</head>
<body>
<div id = "slider"></div>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: JQuery Event Manipulation Methods
Widget Spinner
The Widget Spinner function can be used with widgets in JQueryUI. Widget spinner gives a quick way to select one value from the set.
Syntax
Below is the syntax to use this method -
$( #spinner" ).spinner( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
var spinner = $( "#spinner" ).spinner( );
$( "#disable" ).click( function( ) {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
} );
$( "#destroy" ).click( function( ) {
if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner( );
}
} );
$( "#getvalue" ).click( function( ) {
alert( spinner.spinner( "value" ) );
} );
$( "#setvalue" ).click( function( ) {
spinner.spinner( "value", 5 );
} );
$( "button" ).button( );
} );
</script>
</head>
<body>
<label for = "spinner">Select a value:</label>
<input id = "spinner" name = "value">
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
var spinner = $( "#spinner" ).spinner( );
$( "#disable" ).click( function( ) {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
} );
$( "#destroy" ).click( function( ) {
if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner( );
}
} );
$( "#getvalue" ).click( function( ) {
alert( spinner.spinner( "value" ) );
} );
$( "#setvalue" ).click( function( ) {
spinner.spinner( "value", 5 );
} );
$( "button" ).button( );
} );
</script>
</head>
<body>
<label for = "spinner">Select a value:</label>
<input id = "spinner" name = "value">
</body>
</html>
Output
Below is the output of the above example -
Widget Tab
Widget Tab function can be used with widgets in JQueryUI. Tab is used in swapping between content that is broken into logical sections.
Syntax
Below is the syntax to use this method -
$( "#tabs" ).tabs( );
Example
Below is an example on how to use this method-
<html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#tabs" ).tabs( );
} );
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href = "#tabs-1">Android</a></li>
<li><a href = "#tabs-2">Angular JS</a></li>
<li><a href = "#tabs-3">PHP</a></li>
</ul>
<div id = "tabs-1">
<p>
Android is an open source and Linus-based operating for
mobile devices such as smart phones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<div id = "tabs-2">
<p>
Angular Js is a very powerful JavaScript library. It is used in a
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user
actions. Angular JS is open source, completely free, and used by
thousands of developers around the world.
</p>
</div>
<div id = "tabs-3">
<p>
The PHP Hypertext Preprocessor is a is a programming language
that allow web developers to develop 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>
</div>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<link
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel = "stylesheet">
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script type = "text/javascript">
$( function( ) {
$( "#tabs" ).tabs( );
} );
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href = "#tabs-1">Android</a></li>
<li><a href = "#tabs-2">Angular JS</a></li>
<li><a href = "#tabs-3">PHP</a></li>
</ul>
<div id = "tabs-1">
<p>
Android is an open source and Linus-based operating for
mobile devices such as smart phones and tablet computers.
Android was developed by the Open Handset Alliance, led by
Google, and other companies.
</p>
</div>
<div id = "tabs-2">
<p>
Angular Js is a very powerful JavaScript library. It is used in a
Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user
actions. Angular JS is open source, completely free, and used by
thousands of developers around the world.
</p>
</div>
<div id = "tabs-3">
<p>
The PHP Hypertext Preprocessor is a is a programming language
that allow web developers to develop 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>
</div>
</div>
</body>
</html>
You can try the above code out to see the result for yourselves.
Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the jQuery UI themes.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.