Selected Reading

jQuery - Widget Button

Quiz

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 −

<!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

Previous Quiz Next