jQuery - Widget Button

Description

The Widget button function can be used with widgets in JqueryUI.Button is an input of type submit and an anchor.

Syntax

Here is the simple syntax to use Button −

$(function() {
   $( "input[type = submit], a, button" )
   .button()
   .click(function( event ) {
      event.preventDefault();
   });
});

Example

Following is a simple example showing the usage of Button −

Live Demo

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Button - Default functionality</title>
		
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script src = "//code.jquery.com/jquery-1.10.2.js">
      </script>
      <script src = "//code.jquery.com/ui/1.11.4/jquery-ui.js">
      </script>
		
      <script>
         $(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>

This will produce following result −

jquery-widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started