11-Apr-2023
.
Admin
Hi Guys,
In this example,I will learn you how to use jquery ui button default functionality.you can simply use jquery ui button click event.
jQueryUI provides button() method to transform the HTML element into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
.main-class{
padding:10px 10px 50px 10px;
margin:40px auto;
width:35%;
color:#008B8B;
border-radius:5px;
text-align: center;
border:2px solid #008B8B;
}
</style>
</head>
<body>
<h2>JQuery UI Button Example - NiceSnippets.com</h2>
<div class="main-class">
<div class="widget">
<h1>Widget Buttons</h1>
<button>Laravel</button>
<input type="submit" value="Php">
<a href="#">Jquery</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">Sql</button>
<input class="ui-button ui-widget ui-corner-all" type="submit" value="Node Js">
<a class="ui-button ui-widget ui-corner-all" href="#">Bootstrap</a>
</div>
<script>
$( function() {
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
});
});
</script>
</body>
</html>
It will help you...
#Jqury UI
