jQuery tutorial for beginners - jquery button widget

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-button-widget.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss jQuery button widget jQuery button widget enhances standard form elements like buttons, inputs and anchors to buttons. In the HTML below we have a 1. Button 2. Submit 3. Anchor <input type="button" value="Button Element" /> <input type="submit" value="Submit Button" /> <a href="#">Anchor Element</a> jQuery code to enhance the above elements to buttons $('input[type="button"], input[type="submit"], a').button(); To associate icons with the buttons, use icons option of the button widget. A button can have primary and secondary icons. By default, the primary icon is displayed on the left and the secondary is displayed on the right. $('input[type="button"], input[type="submit"], a').button({ icons: { primary: 'ui-icon-circle-triangle-w', secondary: 'ui-icon-circle-triangle-e' } }); Please note : Icons are not supported with input elements of type button, submit or reset jQuery UI icons http://api.jqueryui.com/theming/icons jQuery button widget can also enhance checkboxes to buttons <input type="checkbox" id="Bold" /><label for="Bold">B</label> <input type="checkbox" id="Underline" /><label for="Underline">U</label> <input type="checkbox" id="Italic" /><label for="Italic">I</label> jQuery code to enhance above checkboxes to buttons $('input[type="checkbox"]').button().click(function () { var isChecked = $(this).is(':checked') ? 'Checked' : 'Unchecked' alert($(this).attr('id') + ' Checkbox ' + isChecked) }); jQuery button widget can also encahnce radiobuttons to buttons <input type="radio" id="Male" name="Gender" /><label for="Male">Male</label> <input type="radio" id="Female" name="Gender" /><label for="Female">Female</label> jQuery code to enhance above radiobuttons to buttons $('input[type="radio"]').button().click(function () { alert($(this).attr('id') + ' radio button selected') }); buttonset() widget is useful to enhance a group of radio buttons or checkboxes to buttons <div id="radioButtons"> <input type="radio" id="Male" name="Gender" /><label for="Male">Male</label> <input type="radio" id="Female" name="Gender" /><label for="Female">Female</label> </div> jQuery code to enhance a group of radio buttons to buttons $('#radioButtons').buttonset(); $('#radioButtons input[type="radio"]').click(function () { alert($(this).attr('id') + ' radio button selected') });