JQuery UI Button

Buttons are one of the most important elements of any webpage. Whether it is form submission or any other user interactive task, buttons are the widely used. To style a button, we need to write quite a button of css script. however JQuery UI has simplified button styling extremely. JQuery UI button functions allow developers to easily style buttons in their applications. In this article we shall see two button functions i.e. button() and buttonset(). Simply call button() function with or without optional parameters on any element which you want to style like a button. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Button</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() {
            $( "#button-element, #input-tag, #anchor-tag").button();
            $( "#button-set" ).buttonset();
         });
          
      </script>
       
   </head>
    
   <body>
       
    <button id="button-element">This is a button</button>
      <input id="input-tag" type="submit" value="This is submit button">
      <a id="anchor-tag" href="">This is anchor tag</a>
      
      <br><br>
      <div id="button-set">
         <input type="checkbox" id="cb1">
         <label for="cb1">Approve</label>
         <input type="checkbox" id="cb2">
         <label for="cb2">Reject</label>
         <input type="checkbox" id="cb3">
         <label for="cb3">Pending</label>
      </div>
       
   </body>
</html>

Download Code Run Code

In the above code different html elements have been styled as button. The button element, the input element and anchor elements are styled as button. Next buttonset() function is styling all the buttons in the form of a set of buttons. The buttons to be included in the set are defined inside a div. This div is selected and the buttonset() function is used to style.

Using Button Icons and Text

You can also pass optional parameters to the button() and buttonset() function to change the look and feel of button elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example demonstrates how to use icons and texts on the buttons.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Button</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() {
            $( "#icon-button" ).button({
               icons: {
                  primary: "ui-icon-home"
               },
               text: false
            });
            $( "#disabled-button" ).button({
               disabled:true
            });
            $( "#button-2" ).button({
               icons: {
                  primary: "ui-icon-calculator",
                  secondary: "ui-icon-search"
               }
            });
         });
      
          
      </script>
       
   </head>
    
   <body>
       
       <button id="icon-button">
         Icon Button
      </button>
      <button id="disabled-button">
         Disabled Button
      </button>
      <button id="button-2">
        2 Icon button
      </button>
   
       
   </body>
</html>

If you open the above page, you will see three buttons. First button will have home icon. Second button will be disabled while the third button will have text in the center and two icons. The right side will contain search icon and the left side will contain calculator icon.Button functions are extremely handy and can be used to improve the look and feel of button type elements on the page.

Download Code Run Code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .