Friday, May 15, 2020

JQuery UI Widgets Tutorial



Hello guys! Welcome to a new section of my tutorial on JQuery. In this tutorial post, am going to be discussing about the JQuery widgets that i introduced to you guys in my last tutorial guide.

Widget accordion

The Widget accordion function can be used with widgets in JQueryUI. Accordion is same as 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 function can be used with widgets in JQueryUI. The AutoComplete on your  page provides suggestions while you type into the field. Suppose 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 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

The 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 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 shows a list of items. A list is transformed, adding theming, mouse and 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

The Widget ProgressBar function can be used with widgets in JQueryUI. A simple progress bar shows 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

The Widget Select Menu function can be used with widgets in JQueryUI. It provides 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 widgets in JQueryUI. The slider is horizontal and has a single handle that can be moved with the mouse or by using 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 provides 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! We have come to the end of this tutorial post on JQuery widgets. Feel free to ask your questions where necessary and i will try to attend to them as soon as possible.

In my next tutorial, i will be discussing about the various JQuery theming. Follow us on our various social media pages to stay updated with our latest tutorials. Use the subscribe button to subscribe to our newsletter so our tutorial posts can be delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment