Introduction to jQuery UI Button
The jQuery UI button() method can be used to transform the standard form elements such as buttons, anchors, input and so all. The button() Enhance form elements to themeable buttons with appropriate active, hover styles and management of mouse action on the buttons. Suppose to group the radio buttons, the button() method provides buttonset() method which is an additional widget. This additional widget is used to select an elements of container which contains group of the radio buttons by using the buttonset() method.
Syntax of jQuery UI Button
There are two ways to use the button() method:
1. $(selector, context).button (options): This is first method which declares the specific HTML element as a button. The options parameter specifies an appearance and the behavior of the button. If the options are more than one, then this method can be used and each option should be separated by using the comma as below:
object. $(selector, context).button( {opt1 : value1, opt2 : value2 ... });2. $(selector, context).button (“action”, params): This is second method which declares an html element as a button and performs an action on that button. The action to be performed is passing as a string disable, enable, destroy the button.
Parameters
Given below are the parameters:
1. options
In the first method $(selector, context).button (options), it accept only one parameter that is option.
There are list of possible values which we can use for the option:
- disabled: This option disable or deactivate the button by set it to true. The default value of it is false.
- icons: This option set an icons to be displayed in the button. There can be one or two icon as Primary icons (left) and secondary icons(right). The Primary icon is specified by an object of the primary property and same way the secondary icon is specified by an object of secondary property. The default value of both icons are NULL.
- text: It represents the text to be displayed on the button. The default value of this option is true.
- label: It represents the label to display on the button instead of natural label. For example the <label> is the natural label of the radio buttons and check boxes. The default value of this option is NULL.
2. action
In the second method $(selector, context).button ( “action”, params ), it accepts the two parameters, the action and params. The action parameter specifics the action to be performed on that button.
The possible values for the action are:
- destroy: It is used to destroy or remove the functionality of the button element and return to original state. It doesn’t accept any parameters.
- refresh: It is used to refresh the button state. It doesn’t accept any parameters.
- disable: It is used to disable the functionality of the button element. It doesn’t accept any parameters.
- enable: It is used to enable the functionality of the button element. It doesn’t accept any parameters.
- option( optName ): It is used to get the value of the specified option as optName which is a string.
- option: It is used to get an current object containing key-value pairs.
- option( optName, value ): It is used to set button option of the passing optName.
- option( options ): It is used to set one or multiple button options in the form of option-value pairs map.
- widget: It is used to get an object which contain the button element. It doesn’t accept any parameters.
Examples of jQuery UI Button
Given below are the examples mentioned:
Example #1
Where the button() method is used to treat an html elements as button without passing any parameters to the button() method.
Code:
<!DOCTYPE html>
<head>
<title> This is an example for button() method</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$( "#b1, #b2, #b3, #b4" ).button();
});
</script>
</head>
<body>
<h3> The example of button element as button :</h3><br>
<button id="b1"> Button element </button><br>
<h3> The example of link element as anchor button :</h3><br>
<a id="b3" href="">An anchor</a><br>
<h3> The example of input element (type=submit) as button :</h3><br>
<input id="b2" type="submit" value="Input submit button"><br>
<h3> The example of input element (type=checkbox) as button :</h3><br>
<input type="checkbox" id="b4">
<label for="b4">Toggle checkbox button</label><br>
<br>
</body>
</html>Output:
Example #2
Where the button() method uses options like icons, disabled and text.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for button() method</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$( "#b1" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#b2" ).button({
icons: {
primary: "ui-icon-power",
secondary: "ui-icon-disk"
}
});
$("#b3").button({
icons: {
primary: "ui-icon-gear"
}
});
$( "#b4" ).button({
disabled:true
});
});
</script>
</head>
<body>
<h3> The example of button with only icon :</h3><br>
<button id="b1">Button with icon only </button><br>
<h3> The example of button with two icons :</h3><br>
<button id="b2">Button with two icons</button>
<h3> The example of button with disabled :</h3><br>
<button id="b3">Button with icon on left </button><br>
<h3> The example of button with disabled :</h3><br>
<button id="b4"> Button Disabled </button><br>
</body>
</html>Output:
Example #3
Where the button() method use the some action.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for button() method</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$( "#b1" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#b1" ).button('disable');
$( "#b2" ).button({
icons: {
primary: "ui-icon-power",
secondary: "ui-icon-disk"
}
});
$( "#b2" ).button('distroy');
});
</script>
</head>
<body>
<h3> The example of disable button :</h3><br>
<button id="b1">disable </button><br>
<h3> The example of distroybutton :</h3><br>
<button id="b2">distroy</button>
</body>
</html>Output:
Conclusion
The button() method is a built in method in UI of jQuery, which can be used to transform the standard form elements such as buttons, anchors, input. So all html element into button also can apply the style through option parameters and action by the action parameter.
Recommended Articles
This is a guide to jQuery UI Button. Here we discuss the introduction to jQuery UI Button along with appropriate syntax, parameters and examples respectively. You may also have a look at the following articles to learn more –
