JQuery UI Toggle Class

In the previous articles we saw how we can add or remove classes to an element. We also studied how we can switch classes for a particular element via JQuery UI. If you remember the last article we used switch class to create a toggle effect on the size and shape of circles. However, there is a better way of achieving this toggle effect via JQuery UI Toggle class function. The toggleClass() adds a class to an element if it is not already added to the element. If the element already contains the class, the toggleClass() function removes that class, thus creating a toggle effect.

To implement toggleClass() function on element, simply call the function on the element on which you want to toggle class. The first paremeter to the toggleClass() function is the name of the class to toggle. The second parameter is the speed with which toggle animation should occur.

Example of JQuery UI Toggle Class

Following webpage contains a circular div of light blue color. The page also contains one button. When the button is pressed, the circle shrinks and its color becomes orange. When the button is clicked again, the size of the circle increases and its color again changes to light blue. Clicking the button again and again toggles the size and shape of the circle. Take a look at the following code, explanation is given after that.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Toggle Class Effect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").toggleClass("circle2","slow");
            });
             

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Toggle Circle Classes </button>
       
      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code Run Code

If you look at the script section of the code, you will find that click event of the button is handled by JQuery event handlers. The default class of the div is “circle”. Clicking the buggon adds “circle2” class to the div. Look at the styles defined by the “circle2” class. It decreases the width and height of the div to 100px which is 200px in circle class. The circle2 class also changes the background color of the div. Therefore, when you click the button the circle2 class is added to the div. Similarly clicking the button again toggles i.e. removes “circle2” class from the div which restores default “circle” class. This increases size as well as changes the background color of the div.

JQuery UI Switch Class

In the last article we saw how to add or remove a class from a specific element. The element contained a class which was overwritten via addClass() function. However, calling removeClass function would restore the actual class. There is a more neat way to do this using JQuery UI switch class functions. The switchClass() function allow developers to replace one css class with another.

To use switchClass() function, simply call it on any element of which you want to change the class. The first parameter to switchClass() function is the old class name, the second parameter is the new class name and the final parameter is the animation speed. Let’s have a look at the following example.

Example of JQuery UI Switch Class

Following webpage contains 2 circular divs. One is a larger circle of light blue color and the other is a smaller circle of orange color. The page also contains a buttons: When the button is clicked, the larger blue circle becomes smaller and its color changes to orange. At the same time, small circle becomes larger and its color becomes light blue. In short both the circles swap each other’s characteristics. Take a look at the following code, explanation is given after that.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Remove Class Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").addClass("circle2", "slow");
            });
             
              $("#btn2").click(function(){
               $(".circle").removeClass("circle2", "slow");
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Shrink Circle </button>
       
<button id = "btn2"> Expand Circle </button>

      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code Run Code

The page contains two divs one with the class circle and the other with circle2. The div with circle class has a width and height of 200 px with light blue color. Similarly, the div with class circle has width and height of 100 px with background color of orange. When the button is clicked, JQuery script runs. Inside which, the class of the div with class “circle” is switched to “circle2”. At the same time, the class of div with “circle2” is switched to “circle” via switchClass() function. Hence, larger circle changes to smaller circle and smaller circle changes to larger circle. Now, if you click the button again, the classes of the two divs again switch and circles change their appearance to how they looked when the page was loaded.

JQuery UI Add Class

The last article explained how we can apply fancy effects on elements via JQuery UI. This article focuses on changing the appearance of the element at run time. For instance you have a div which asks the user to click a button. When user clicks the button you want to change the background color of the div to green and change its text to success message. You can do so by changing the class of the element at run time. JQuery UI Add class and remove class functions allow users to perform such actions.

To implement add class and remove class functionality, simply call addClass and removeClass functions on the elements. The first parameter to these functions is the name of the class to add or remove. The second parameter is the time in milliseconds or slow/fast values which specify speed with which class is removed or applied to the element.

Example of JQuery UI Add Class and Remove class

Following webpage contains a circular div of light blue color. The page also contains two buttons: one for shrinking the circle and the other for expanding circle. When use presses shrink button the circle shrinks, similarly clicking expand button expands the circle. Take a look at the following code, explanation is given after that.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Remove Class Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").addClass("circle2", "slow");
            });
             
              $("#btn2").click(function(){
               $(".circle").removeClass("circle2", "slow");
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Shrink Circle </button>
       
<button id = "btn2"> Expand Circle </button>

      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code Run Code

If you look at the script section of the code, you will find that click events of both the buttons are handled by JQuery event handlers. The default class of the div is “circle”. Clicking the shrink button adds “circle2” class to the div. Look at the styles defined by the “circle2” class. It decreases the width and height of the div to 100px which is 200px in circle class. The circle2 class also changes the background color of the div. Therefore, when you click the shrink button the circle2 class is added to the div. This shrinks the circle and also changes its background. Similarly clicking expand button removes “circle2” class from the div which restores default “circle” class.. This increases size as well as changes the background color of the div.

JQuery UI Effect

We have earlier how JQuery can be used to create fade, slide, hide and show effects. However, core JQuery effects are limited. For instant what if you want an element to bounce up and down or shake left right? To achieve such functionalities in JQuery, custom JavaScript coding is required. On the flip side, JQuery UI contains built in functionalities to achieve such effects. JQuery UI Effect functions can create fancy animations such as bounce affect, explode effect, slide effect, shade effect etc. To implement an effect via JQuery, simply call the effect() function on the element on which you want to create effect. The parameters to the effect function specify the type and behavior of the effect.

JQuery UI Bounce Effect

Let’s explain JQuery UI effect function with the help of an example. The following code contains a circular div which bounces up and down on button click. Take a look at the following code.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Bounce Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").effect(
                   "bounce", 
                   {times:6,
                   distance:500},
                   2000 );
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
       </style>
       
   </head>
   <body>

      <button id = "btn"> Bounce the circle </button>

      <div class = "circle">
        
      </div>
  
   </body>
</html>

Download Code Run Code

Open the above page in the browser, you should see a circle with color aqua color at the middle of the page. You should also see a button at the top left. When you click the button, the circle should bounce six times. The distance traveled upward before the first bounce should be 500px.

Now, look at the script area of the webpage in the header section. Upon the button click, JQuery calls JQuery UI effect function on the div. The first parameter to the effect function is the type of effect which is “bounce” in this case. The second parameter is a pair of curly brackets. Inside these brackets the first attribute specifies the number of times the div should bounce i.e, while the second attribute specifies the distance traveled in pixels in the first bounce. You can also have a third optional parameter which is a callback function. Using the same technique, you can create, shake, slide, explode and other JQuery UI effects.

JQuery UI Color Animation

In the core JQuery sections we studied how to change the color properties of any element when an event occurs. However, to perform animations while manipulating color properties is a cumbersome task in core JQuery. For instance, you might to change the color of a div with smooth transition when a user clicks some button. Such tasks require custom logic. However, JQuery UI Color Animation functions make it very easy to achieve such functionalities. To create color animations in JQuery UI, simply call animate() function on the elements on which you want to perform animations. Inside the animate function you can specify the type of color animation you want to perform. Take a look at the following example.

JQuery UI Background Color Animation

In the following code, we shall change the background color of an element with smooth animation on upon button click. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script type="text/javascript">
         $(document).ready(function() {
            $('#animbutton').click(function() {
               $('#animelement').animate({
                  backgroundColor: "#ccc",
                  color: "#fff"
               })
            })
         });
      </script>
       
       <style>
           .animClass{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               border-radius: 100%;
               text-align: center;
           }
       </style>
   </head>
   <body>
      <div id="animelement" class="animClass">
         Hello!
      </div>
      <button id="animbutton">Click Me</button>
   </body>
</html>

Download Code Run Code

When you open the above page in a browser, you should see a circular div with light blue background and black text. Clicking the button should smoothly change the color of the div to grey and text within it to white.

JQuery UI Outline Color Animation

You can also change the outline of any element using parameters within the animate function. For instance if you want to add outline to any html element you can do so using outlineColor property. Take a look at the following example to see outlineColor parameter in action.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script type="text/javascript">
         $(document).ready(function() {
            $('#animbutton').click(function() {
               $('#animelement').animate({
                  outlineColor: "#333",
                  backgroundColor: "#fff"
               })
            })
         });
      </script>
       
       <style>
           .animClass{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               text-align: center;
           }
       </style>
   </head>
   <body>
      <div id="animelement" class="animClass">
         <em>Hello</em>!
      </div>
      <button id="animbutton">Click Me</button>
   </body>
</html>

Download Code Run Code

Clicking the button in the above webpage should change the background color of the div to white and should add an outline around it. There are other JQuery UI color animation properties as well which allow users to manipulate different color properties. Some of these properties are backgroundColor, textDecorationColor, borderBottomColor, borderLeftColor, borderTopColor, borderRightColor, color, columnRuleColor, outlineColor, textEmphasisColor

JQuery UI Tooltip

The more you help your visitor perform different actions on your website, the more likely will he return to your website. Providing ease of use to the user is the first and foremost task for a developer. There are different ways of adding visual help to any control in the website. One such control is the tooltip control. Tooltip is a small floating label around an html control. For instance, often times if you hover your mouse over an input control, a small message appears with some info about the control. JQuery UI tooltip widget provides ability to create tooltips. To create a tooltip, simply call tooltip() function with or without optional parameters on any element which you want to have a tooltip. Any element having tool tip should have a title attribute. The tooltip message is defined by this title attribute. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tooltip</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
         $(function() {
            $( "#spin-div").tooltip();
            $( "#fruitlist").tooltip();
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="fruit-input" title ="Enter Fruit Name"/>
          
          <ul id="fruitlist" title="Fruits List">
            <li>Apple</li>
            <li>Mango</li>
            <li>Guava</li>
          </ul>
      </div>
   </body>
</html>

Download Code Run Code

The above webpage contains a an input control and a list of items. JQuery factory method selects both of these elements via id and call tooltip() on each of these. The tooltip message for both elements is specified by their respective title attribute. Now hover your mouse over the input and list controls. You should see a tooltip fade in. Similarly, Leaving your mouse from the controls should fade out the tooltip.

JQuery UI Tooltip with Optional Parameters

You can also pass additional optional parameters to the tooltip() function to change the behavior of the tooltip. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses disable optional parameter with value true. This disables tooltip functionality on the element. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tooltip with Optional Parameters</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    
      <script>
         $(function() {
            $( "#spin-div").tooltip();
            $( "#fruitlist").tooltip({
               disabled: true
            });
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="fruit-input" title ="Enter Fruit Name"/>
          
          <ul id="fruitlist" title="Fruits List">
            <li>Apple</li>
            <li>Mango</li>
            <li>Guava</li>
          </ul>
      </div>
   </body>
</html>

Download Code Run Code

In the above code, the disable property of tooltip function is set to true for list. Therefore, if you hover over the list, no tooltip shall appear.

JQuery UI Tabs

One of the previous articles explained the process of using accordion menus to save space on webpages. There are other ways to perform similar functionalities. One of the ways is to use JQuery UI Tabs widget. Tab group is one of the most frequently used grouping feature. Tabs allow developers group related content. clicking a tab opens the details for that tab. Perform following steps to create tabs

  • The elements you want to convert to tabs must be inside the ordered or un-ordered lists.
  • Each tabbed element should be located inside the “li” element. Anchor tag should wrap each element inside the list and anchor tab must have an href attribute which starts with #.
  • You can use any element as detail element for specific tab. The id of the element should be same as the value after the # tab for the href attribute to which you want to connect this detailed element. Suppose the value of href attribute for a tab is #abcd. The id of the corresponding element should be “abcd”

Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tabs with optional parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
     <script>
         $(function() {
            $( "#tab-list" ).tabs({
                
                
            });
         });
      </script>
		
		
   </head>
	
   <body>
      <div id = "tab-list">
         <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#about">About</a></li>
            <li><a href = "#contact">Contact</a></li>
             <li><a href = "#services">Services</a></li>
         </ul>
			
         <div id = "home">
            <p>Nunc vulputate odio quis leo dignissim, at tristique ex porttitor. Quisque ut ligula sem. Phasellus mi orci, ultrices eget maximus vitae, efficitur cursus leo. Nunc orci diam, eleifend auctor sollicitudin id, sagittis ac arcu. Duis iaculis, risus non varius viverra, ipsum tellus fringilla est, quis cursus velit felis a turpis.</p>
         </div>
			
         <div id = "about">
            <p>Proin enim velit, rhoncus in mollis in, iaculis sed risus. Nam varius elementum vulputate. Ut malesuada tellus in dui tempus tincidunt. Suspendisse pulvinar tristique purus, et tempus nibh posuere et. Vestibulum ut dignissim neque. Integer quis mi nec eros laoreet convallis. Praesent tristique sem nulla, sit amet mattis mi auctor et. </p>
         </div>
			
         <div id = "contact">
            <p>Morbi ullamcorper vulputate maximus. Curabitur dictum ante id lacus volutpat, in pellentesque libero lobortis. Sed bibendum massa et tempor eleifend. Morbi tempus lobortis nisl, ac mollis ante. Etiam auctor vel arcu ac venenatis. Maecenas iaculis dignissim nulla et ultrices. Morbi tempor mollis erat, sed accumsan nisi pretium vitae. Sed ullamcorper risus nibh, vitae imperdiet enim facilisis ut.  </p>
					
            <p> Nulla rhoncus vehicula scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisi massa, dignissim eget egestas quis, tincidunt nec lorem. Quisque molestie tortor ut dolor volutpat, in tempor velit suscipit. Morbi nec nisl ultrices, congue nisl ut, commodo orci. Fusce sed ex eget diam fermentum mattis. Mauris vitae tellus mi. Pellentesque viverra velit in mauris tempor, id gravida ipsum tempus.
               </p>
         </div>
          
          <div id ="services">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu orci congue, porta turpis a, faucibus turpis. Praesent sed ultricies lectus, sit amet bibendum sapien. Vestibulum vitae sem sed dui blandit vulputate vitae ut erat. Pellentesque facilisis blandit mauris id iaculis. Donec suscipit tortor ut lacus hendrerit ornare. Sed nunc odio, sodales non mauris quis, iaculis placerat nisi. Quisque scelerisque libero velit, quis dapibus lacus consequat a.
            </p>
          
          </div>
			
      </div>
		
   </body>
	
</html>

Download Code Run Code

The above code contains four list elements and four corresponding div elements inside the outer div. JQuery factor function selects the outer div with id “home” and calls tabs() function on it. Each list element represents a tab, similarly, each div element represents detail of the tab. Clicking a tab opens will open corresponding div element.

JQuery UI Tabs with Optional Parameters

You can also pass additional optional parameters to the tabs() function to change the behavior of tabs. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses, collapsible parameter with value true. Collapsible specifies whether or not the tab will be collapsed with mouse click. It’s default value is false. Max specifies the maximum value of the spinner, min specifies the minimum while step specifies the number of values to skip. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tabs</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
     <script>
         $(function() {
            $( "#tab-list" ).tabs({
                 collapsible:true 
            });
         });
      </script>
		
		
   </head>
	
   <body>
      <div id = "tab-list">
         <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#about">About</a></li>
            <li><a href = "#contact">Contact</a></li>
             <li><a href = "#services">Services</a></li>
         </ul>
			
         <div id = "home">
            <p>Nunc vulputate odio quis leo dignissim, at tristique ex porttitor. Quisque ut ligula sem. Phasellus mi orci, ultrices eget maximus vitae, efficitur cursus leo. Nunc orci diam, eleifend auctor sollicitudin id, sagittis ac arcu. Duis iaculis, risus non varius viverra, ipsum tellus fringilla est, quis cursus velit felis a turpis.</p>
         </div>
			
         <div id = "about">
            <p>Proin enim velit, rhoncus in mollis in, iaculis sed risus. Nam varius elementum vulputate. Ut malesuada tellus in dui tempus tincidunt. Suspendisse pulvinar tristique purus, et tempus nibh posuere et. Vestibulum ut dignissim neque. Integer quis mi nec eros laoreet convallis. Praesent tristique sem nulla, sit amet mattis mi auctor et. </p>
         </div>
			
         <div id = "contact">
            <p>Morbi ullamcorper vulputate maximus. Curabitur dictum ante id lacus volutpat, in pellentesque libero lobortis. Sed bibendum massa et tempor eleifend. Morbi tempus lobortis nisl, ac mollis ante. Etiam auctor vel arcu ac venenatis. Maecenas iaculis dignissim nulla et ultrices. Morbi tempor mollis erat, sed accumsan nisi pretium vitae. Sed ullamcorper risus nibh, vitae imperdiet enim facilisis ut.  </p>
					
            <p> Nulla rhoncus vehicula scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisi massa, dignissim eget egestas quis, tincidunt nec lorem. Quisque molestie tortor ut dolor volutpat, in tempor velit suscipit. Morbi nec nisl ultrices, congue nisl ut, commodo orci. Fusce sed ex eget diam fermentum mattis. Mauris vitae tellus mi. Pellentesque viverra velit in mauris tempor, id gravida ipsum tempus.
               </p>
         </div>
          
          <div id ="services">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu orci congue, porta turpis a, faucibus turpis. Praesent sed ultricies lectus, sit amet bibendum sapien. Vestibulum vitae sem sed dui blandit vulputate vitae ut erat. Pellentesque facilisis blandit mauris id iaculis. Donec suscipit tortor ut lacus hendrerit ornare. Sed nunc odio, sodales non mauris quis, iaculis placerat nisi. Quisque scelerisque libero velit, quis dapibus lacus consequat a.
            </p>
          
          </div>
			
      </div>
		
   </body>
	
</html>

Download Code Run Code

JQuery UI Spinner

In the last tutorial we saw how we can get numeric values within a specific range using JQuery UI slider control. There are other JQuery UI widgets which allow user to insert numeric values within a specific range. One such control is the JQuery UI Spinner widget. This widget allow users to increment numeric values within a control using up and down keys on keyboard or using mouse scroll. Clicking up and down arrows can also increment and decrement values. Also, user can insert numeric value directly in the control. Values in the control can be skipped using step feature. To create a spinner, simply call spinner() function with or without optional parameters on any element which you want to convert to spinner. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
      <script>
         $(function() {
            $( "#spinner" ).spinner();
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="spinner" value="0" />
      </div>
   </body>
</html>

Download Code Run Code

The above code contains a div inside which there is an input element with id “spinner”. JQuery factory function selects this element and calls the spinner() function on it. If you load the above page in browser, you should see a spinner with default value of 0. You can change the value of the spinner by pressing up and down keys, by scrolling your mouse or by clicking up and down arrows with mouse.

JQuery UI Spinner with Optional Parameters

You can also pass additional optional parameters to the spinner() function to change the behavior of the spinner. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses, max, min and step optional parameters. Max specifies the maximum value of the spinner, min specifies the minimum while step specifies the number of values to skip. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
      <script>
         $(function() {
            $( "#spinner" ).spinner({
                max:20,
                min:-20,
                step:2
            });
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="spinner" value="0" />
      </div>
   </body>
</html>

Download Code Run Code

In the above webpage spinner has a maximum and minimum values of 20 and -20 respectively . Also, when you increment or decrement the counter, it increases or decreases by 2.

JQuery UI Slider

There are several ways to take numeric input from users. You can use normal text boxes or drop down lists etc. However there are chances that user can enter invalid values in the text boxes. For instance you might want to take value within the range of 1-100. It is not conveninent of allowing user to enter value in the text and then implementing validations. There is a better way to do this JQuery UI Slider widget. The slider widget allows visitor to select a numeric value within a specific range by sliding a small button horizontally. To create a slider, simply call slider() function with or without optional parameters on any element which you want to convert to slider. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
       <script>
         $(function() {
            $( ".slider" ).slider();
         });
      </script>
       
       <style>
           .slider{
               
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
    
   <body>
   
      <div class="slider"></div>
   </body>
</html>

Download Code Run Code

The above page contains a div with class slider. JQuery factory method selects this div and calls slider() function on this div. When you run the above page in browser you should see a 500 pixels wide slider in the middle of your page. You can drag the slider with he help a small button located on it.

Slider with Optional Parameters

You can also pass additional optional parameters to the slider() function to change the behavior of the slider. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters value and orientation are is passed to menu function. The value specifies default selected value for the slider and orientation specifies vertical or horizontal orientation of the slider. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Slider with Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
       <script>
         $(function() {
            $( ".slider" ).slider({
                
               value: 50,
               orientation: "vertical"
            });
             
         });
      </script>
       
    
   </head>
    
   <body>
   
      <div class="slider"></div>
   </body>
</html>

Download Code Run Code

In the above webpage, the default value for slider is set to 50 which sets the slider button at the middle of the slider when the page loads. Similarly, the orientation of the slider is set to vertical using orientation parameter

JQuery UI Progressbar

Often times a webpage takes quite a bit of time to complete some function. For instance user form submission or data retrieval tasks might take large of amount of time to process. In such cases it is very convenient to show the users the amount of task completed and the amount remaining. Progress bar is one of the most useful widgets for such scenarios. Progress bar visually shows amount of processing done as well as the amount of it left. JQuery UI progressbar() function allows developers to convert an ordinary element to a progress bar. To create progress bar, simply call progressbar() function with value parameter on any input element which you want to convert to progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
            var i = 0;                    
            function incProgress () {        
               setTimeout(function () {   
                  $(function() {

                         $( ".progress" ).progressbar({
                             value:i
                         });
                     });         
                  i++;                    
                  if (i < 101) {            
                     incProgress();             
                  }                        
               }, 200)
            }

         incProgress(); 
         
      </script>
       
       <style>
           .progress{
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
   <body>
      <!-- HTML --> 
      <div class="progress">
         
      </div>
   </body>
</html>

Download Code Run Code

In the above webpage a simple div element is converted to progress bar by calling progressbar() function on it. If you look at the script an iterative function incProgress is created. This function calls itself after every 200 milliseconds and each time it increments the value of the value parameter inside the progressbar() function. The iterative function stop executing after 100 execution. When you run the page, you should see a progress bar whose progress starts from 0 and increases until progress bar is full

Progress bar with Optional Parameters

You can also pass additional optional parameters to the progressbar() function to change the behavior of progress bar. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters max is passed to menu function. The max specifies the number of units required to fill a progress bar. By default this value is 100. If you set the max parameter to 400 and value to 100, it will only fill 25% of the progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
            var i = 0;                    
            function incProgress () {        
               setTimeout(function () {   
                  $(function() {

                         $( ".progress" ).progressbar({
                             value:i,
                             max:400
                         });
                     });         
                  i++;                    
                  if (i < 101) {            
                     incProgress();             
                  }                        
               }, 100)
            }

         incProgress(); 
         
      </script>
       
       <style>
           .progress{
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
   <body>
      <!-- HTML --> 
      <div class="progress">
         
      </div>
   </body>
</html>

Download Code Run Code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .