Post
Ask Question

JQuery UI Plugin Widgets

JQuery UI Plugin Widgets Demos

In this article I will explain JQuery UI Widgets, for JQuery UI Interactions please visit:
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:

  1. <link href="Content/themes/base/accordion.css" rel="stylesheet" />  
  2.     <script src="Scripts/jquery-2.1.4.js"></script>    
  3.     <script src="Scripts/jquery-ui-1.11.4.js"></script>    
  4.     <script>
  5.     $(function() {    
  6.         $("#AccordionDemo").accordion();    
  7.     });   
  8. </script>
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <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%">  
  12.             <h3 style="color:blue">Tab 1</h3>  
  13.             <div>  
  14.                 <p>  
  15. JQuery UI Accordion Widgets is a JQuery based expandable and collapsible content holder that is broken into sections and look like as tabs.  
  16. We are using Accordion() method for accordion widgets. By the use of this method we can represent information in a limited amount of space.  
  17. </p>  
  18.             </div>  
  19.             <h3 style="color:blue">Tab 2</h3>  
  20.             <div>  
  21.                 <p>  
  22. JQuery UI widget is a specialized JQuery plug-in.  
  23. Widgets are full-featured UI controls that bring the richness of desktop applications to the Web.  
  24. </p>  
  25.             </div>  
  26.             <h3 style="color:blue">Tab 3</h3>  
  27.             <div>  
  28.                 <p>  
  29. JQuery UI enable our applications to have a cool user interface and animation in a faster way.  
  30. It is the set of plug-ins include interface interactions, effects, animations, widgets and themes built on the JavaScript Library.  
  31. JQuery is used to create Cohesive and Consistent APIs.  
  32. It is a method that we can use to extends JQuery prototype objects.  
  33. By that prototype object you can enable all jQuery objects to inherit any methods that you add.  
  34. </p>  
  35.                 <ul>  
  36.                     <li>List item one</li>  
  37.                     <li>List item two</li>  
  38.                     <li>List item three</li>  
  39.                 </ul>  
  40.             </div>  
  41.         </div>  
  42.     </form>  
  43. </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:
  1. <script type="text/javascript">  
  2.     $(function() {    
  3.         var availabletags = [    
  4.             "c",    
  5.             "C++",    
  6.             "c#",    
  7.             "COBOL",    
  8.             "Turbo C",    
  9.             "java",    
  10.             "javascripts",    
  11.             "jQuery",    
  12.             "angularjs",    
  13.             "nodejs"];    
  14.         $("#tags").autocomplete({    
  15.             source: availabletags    
  16.         });        
  17.     }); 
  18. </script>  
  19. </head>
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.         <div class="Autocomplete_Widgets" style=" margin-left:10%; margin-right:10%; margin-top:5%">  
  23.             <label for="tags">Search: </label>  
  24.             <input id="tags"/>  
  25.         </div>  
  26.     </form>  
  27. </body> 
  1.  

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:

  1. <title>UI Button Widgets</title>
  2. <style type="text/css">  
  3. a, button, p, h3,input[type=submit] {  
  4.   background-color: blue;  
  5.   color: white;  
  6. }  
  7. </style>
  8. <body>  
  9.     <button>A button element</button>  
  10.     <input type="submit" value="A submit button"/>  
  11.     <a href="#">An anchor</a>  
  12.     <p>A Paragraph</p>  
  13.     <h3> An Heading</h3>  
  14. </body>
  15. $(function() {  
  16.     $("input[type=submit], a, button, p, h3")  
  17.         .button()  
  18.         .click(function(event) {  
  19.         event.button();  
  20.     });  
  21. });
  22. </script>   
  23. /head>
  24. <body>  
  25.     <button>A button element</button>  
  26.     <input type="submit" value="A submit button"/>  
  27.     <a href="#">An anchor</a>  
  28.     <p>A Paragraph</p>  
  29.     <h3> An Heading</h3>  
  30. </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:

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

Datepicker Code:


  1. <script type="text/javascript">
  2. $(function() {  
  3.     $("#datepickerdemo").datepicker();  
  4. });
  5. </script>  
  6. <p>DatePicker: <input type="text" id="datepickerdemo" />  
  7. </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:

  1. <link href="Content/themes/base/menu.css" rel="stylesheet" />  
  2. <script type="text/javascript">
  3. $(function() {  
  4.     $("#menu").menu();  
  5. }); 
  1. </script> 
  2. <style>    
  3. .ui-menu {  
  4.   width: 150px;  
  5.   border: 2px solid;  
  6. }    
  7. </style> 
  1. <body>  
  2. <form id="form1" runat="server">  
  3.     <div>  
  4.         <ul id="menu">  
  5.             <li>Canada</li>  
  6.             <li>America</li>  
  7.             <li>Sri Lanka</li>  
  8.             <li>India  
  9.   
  10.                 <ul>  
  11.                     <li>Delhi</li>  
  12.                     <li>Uttar Prdesh  
  13.   
  14.                         <ul>  
  15.                             <li>Merrut</li>  
  16.                             <li>Bijnor</li>  
  17.                         </ul>  
  18.                     </li>  
  19.                     <li>GOA</li>  
  20.                 </ul>  
  21.             </li>  
  22.             <li>Japan</li>  
  23.         </ul>  
  24.     </div>  
  25. </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,

  1. $(function() {  
  2.     $("#progressbar").progressbar({  
  3.         value: 50  
  4.     });  
  5. }); 

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

  1.  <script> 
  2.     $(function() {    
  3.         $("#slider").slider();    
  4.     });  
  5. </script>  
  6. <body>  
  7.    <div id="slider">
  8.    </div>
  9. </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:

  1. $(function() {  
  2.     var spinner = $("#spinner").spinner();  
  3.     $("#getvalue").click(function() {  
  4.         alert(spinner.spinner("value"));  
  5.     });  
  6.     $("#setvalue").click(function() {  
  7.         spinner.spinner("value", 5);  
  8.     });  
  9.     $("button").button();  
  10. });

HTML Code:

  1. <p>  
  2.     <label for="spinner">Select a value:</label>  
  3.     <input id="spinner" name="value"/>  
  4. </p>  
  5. <p>  
  6.     <button id="getvalue">Get value</button>  
  7.     <button id="setvalue">Set value to 5</button>  
  8. </p>

For Tabs and Tooltip you can use the same method like the following:

  1. $(document).tooltip();  
  2. $(document).tabs();  

Summery

In this post, I will explained how we can use UI Plugin Widgets.


Similar Articles