jQuery UI Button Tutorial | Button Widget in jQuery UI - jQuery UI Tutorial 18

Показать описание

Notes for You:: jQuery UI 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

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"/>

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

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:
jQuery UI Tutorial 19 - jQuery UI Control Group Tutorial

Follow the link for previous video:
jQuery UI Tutorial 17 - jQuery UI CheckboxRadio Tutorial

=========================================

#chidrestechtutorials #jqueryui #jqueryuitutorial