Creating Button Widget
Notes:
jquery ui - Creating Button Widget:
Button Widget:
enhances the standard buttons, and anchor elements to theme able buttons
Creating Button Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Button Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3. Code the structure of the widget (i.e. HTML or markup):
To create a Button widget; we need to create any standard button or an anchor element
<button id="button1">Button 1</button>
<input type="button" value="Button 2" id="button2"/>
<input type="submit" value="SUBMIT" id="button3"/>
<input type="reset" value="RESET" id="button4"/>
<input type="image" src="button.png" id="button6"/>
<a href="#" id="button5">Button 5</a>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call button jQuery UI function on it
<script type="text/javascript">
$("#button1").button();
$("#button2").button();
$("#button3").button();
$("#button4").button();
$("#button5").button();
$("#button6").button();
</script>
Interview Questions:
