Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery button widget

Suggested Videos
Part 88 - jQuery selectmenu from database
Part 89 - jquery dialog widget
Part 90 - jquery dialog save to database



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>

The above HTML will be rendered as shown below
jquery button widget

jQuery code to enhance the above elements to buttons
$('input[type="button"], input[type="submit"], a').button();

With the above jQuery code, the elements will be rendered as buttons
jquery button widget example

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'
    }
});

jquery button icon example

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

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')
});

jquery radio button widget

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')
});

jquery buttonset widget

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.