Sql server, .net and c# video tutorial: jquery button widget

Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

(追記) (追記ここまで)

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

<inputtype="button"value="Button Element"/>

<inputtype="submit"value="Submit Button"/>

<ahref="#">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

<inputtype="checkbox"id="Bold"/><labelfor="Bold">B</label>

<inputtype="checkbox"id="Underline"/><labelfor="Underline">U</label>

<inputtype="checkbox"id="Italic"/><labelfor="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

<inputtype="radio"id="Male"name="Gender"/><labelfor="Male">Male</label>

<inputtype="radio"id="Female"name="Gender"/><labelfor="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

<divid="radioButtons">

<inputtype="radio"id="Male"name="Gender"/><labelfor="Male">Male</label>

<inputtype="radio"id="Female"name="Gender"/><labelfor="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

Email This BlogThis! Share to X Share to Facebook Share to Pinterest

1 comment:

Unknown May 25, 2021 at 4:53 AM
hello i want to know that what the fiels you have on your solution side bar and..
Reply Delete
Replies