Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

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: