We now have a youtube channel. Subscribe!
Home
jQuery

JQuery UI Widgets Tutorial



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( ); 
} );

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>

You can try the above code out to see the result for yourselves.



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
} );

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>

Output

Below is the output of the above example -

jQuery 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( );
     } );
} );

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>

Output

Below is the output of the above example -

jQuery Example An anchor




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>

Output

Below is the output of the above example -

jQuery Example Date:



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>

You try the above code out to see the result for yourselves.



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>

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
} );

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>

You can try the above code out to see the result for yourselves.


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>

Output

Below is the output of the above example -

jQuery 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>

You can try the above code out to see the result for yourselves.


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>

Output
Below is the output of the above example -

jQuery 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>


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain