Going through the jQuery UI framework, let us learn how to design themeable intuitive buttons using jQuery UI button() method along with managing options, actions, events and mouse movements related to it. These buttons are really useful in web designing projects where the user interface is expected to be highly interactive.
Syntax:
$(selector, context).button(options)
The options parameter takes care of the design or looks of buttons along with its behavior.
If there are more than one option to be provided then you may separate them using a comma as follows:
$(selector, context).button ({option1: value1,
option2: value2, option3: value3...})
The button() method can also handle actions on buttons as follows:
$(selector, context).button ("action", [parameters]);
- Links for jQuery UI libraries:
<link rel=’stylesheet’
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script>
<link rel=’stylesheet’
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
Example 1: The following example demonstrates creating the basic buttons.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQueryUI Button</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
$(function () {
$("#buttonId, #submitId, #anchorId").button();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Button </b>
<div class="height"> </div><br>
<div class="buttons-div">
<button id="buttonId">Button element</button>
<input id="submitId" type="submit" value="Submit button">
<a id="anchorId" href="">Anchor</a>
</div>
</body>
</html>
The script part of the above example program can also be written as follows
javascript
<script>
$(function () {
$("#buttonId, #submitId, #anchorId")
.button().click(function (event) {
event.preventDefault();
});
});
</script>
Output:
Example 2: The visual grouping of buttons are handled by using jQuery UI buttonset() method.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQueryUI | Checkboxradio buttons</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet type=" text/css" />
<script>
$(function () {
$("input").checkboxradio();
$("#buttonsetId").buttonset();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Checkboxradio buttons </b>
<h2>Radio buttons Group</h2>
<div id="buttonsetId">
<fieldset style="width:300px">
<legend>Select a Location: </legend>
<label for="radioId1">Delhi</label>
<input type="radio" name="radioId1" id="radioId1">
<label for="radioId2">Pune</label>
<input type="radio" name="radioId2" id="radioId2">
<label for="radioId3">Hyderabad</label>
<input type="radio" name="radioId3" id="radioId3">
</fieldset>
</div>
</body>
</html>
Output:
Example 3: The following example demonstrates the use of different types of jQuery UI buttons.
html
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI Button types</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
$(function () {
$('.btnClass').click(function (event) {
event.preventDefault();
$(this).button();
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Button types</b>
<div class="height"></div><br>
<input class="btnClass" type="submit" value="Submit button">
<input class="btnClass" type="reset" value="Reset button">
<div class="height"></div><br />
<input class="btnClass" type="button" value="Input button">
<button class="btnClass">Simple button </button>
<div class="height"></div><br />
<a class="btnClass" href="#">Anchor button</a>
<input class="btnClass" type="checkbox" id="checkboxID">
<label for="checkboxID">Toggle button</label><br>
</body>
</html>
Output:
- Before Clicking the Button:
- After Clicking the Button:
$(selector, context).button (options) method:
Example 4: The following example demonstrates the use of jQuery UI button() method with options text and icons. Other options are also handled, for example setting of icon position to "beginning" or "end" by iconPosition option. One or two icons are set on the button. The primary icons are set in the left and secondary icons are set on the right as shown below in the image. There are so many options available in the library of jQuery UI button(), the programmer can choose or customize other options as per the project requirement.
html
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI | Setting icons, text options</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script>
$(function () {
$("#iconBtnId").button({
iconPosition: "end",
// text shown on the button
label: "Label given by coder",
icons: {
primary: "ui-icon-locked"
},
text: true // text to be shown or not
});
$("#buttonId").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Setting icons, text options </b>
<h2>Other functionalities of jQuery UI buttons</h2>
<button id="iconBtnId">
Button with icon
</button>
<button id="buttonId">
Button with two icons
</button>
</body>
</html>
Output:
Example 5: jQuery UI button() provides many methods with options which can be used to control the themeable widget. The programmer can use any of them as per the requirement. The example only demonstrates some of them as a guide.
The following code demonstrates the click and change events triggered by the button along with use of options like icons, destroy and disable . jQuery UI button() method also supports event management as implemented. It also supports enable and disable status of the jQuery UI button.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQueryUI | Actions on Buttons </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
$(function () {
$('#destroyedBtnId').button().click(function (e) {
/* This option removes and returns
the element to its original state */
$('#destroyedBtnId').button("destroy");
e.preventDefault();
})
$("#destroyedBtnId").button({
// It is set to true, so that the
// text is visible
text: true,
icons: {
primary: "ui-icon-seek-start"
}
});
$("#disabledBtnId").button({
icons: {
primary: "ui-icon-seek-prev"
}
});
// It disables the themeable button
$("#disabledBtnId").button('disable');
$("#btnToPlay").button({
text: true,
icons: {
primary: "ui-icon-play"
}
});
// 'change' event management
$('#checkboxId').change(function (e) {
$('#btnToEnable').button(
// Handles status of the button
// through 'enable' or 'disable'
$(':checked').length == 1 ? "enable" : "disable"
)
});
$("#btnToEnable").button();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Actions on Buttons </b>
<div class="height"> </div><br>
<div class="buttons-div">
<button id="destroyedBtnId">This button is destroyed</button>
<button id="disabledBtnId">This button is disabled</button>
<button id="btnToPlay">Play this button </button>
<div class="height"> </div><br>
<div>Click here: <input type=checkbox id="checkboxId" /></div>
<button id="btnToEnable">Enable/Disable effect </button>
</div>
</body>
</html>
Output:
- Before Clicking the Button:
After Clicking the Button:
Example 6: When a button is created, the event is triggered as implemented in the following code.
html
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI | Create event </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
// When the button is created, event is triggered
$(function () {
$("#btnCreateId").button({
create: function (event) {
$(event.target).click(function (event) {
event.preventDefault();
alert("Create event button was pressed!");
})
}
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQueryUI | Create event </b><br />
<div class="height"></div>
<button id="btnCreateId">Create event</button>
</body>
</html>
Output:
- Before Clicking the Button:
After Clicking the Button:
Similar Reads
jQuery :button Selector
The jQuery :button selector selects button elements and input elements with type="button". The button element is not selected if we use input=" button" as a selector. Syntax: $(":button") Example 1: In this example, we are using jQuery: button Selector. HTML <!DOCTYPE html> <html> <he
1 min read
jQuery UI Introduction
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is the perfect choice. Features: jQue
2 min read
jQuery UI Button icon Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button icon option is used to add an icon inside button element. Syntax: $( ".selector" ).button({ icon: "ui-icon-gear"
1 min read
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a perfect choice. This JavaScript
3 min read
jQuery UI Button create Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button create event is used to trigger when the button element is created. This event accept a callback function that h
1 min read
jQuery UI Button label Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button label option is used to add the label on the button element. Syntax: $( ".selector" ).button({ label: "custom la
1 min read
jQuery UI Button widget() Method
jQuery UI button widget() method returns an object which contains the visual representation of the button Syntax: $( ".selector" ).button("widget") Parameters: This method does not accept any parameters. Return values: This method returns an object value. Links for jQuery UI libraries: <link rel=
1 min read
jQuery UI Button option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button option() method is used to set or return the value currently associated with the specified element. Syntax: opti
2 min read
jQuery UI Button enable() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button enable() method is used to enable the disabled button element. It does not accept any parameter. Syntax: $(".sel
1 min read
jQuery UI Button classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button classes option is used to add some additional classes to the button element. Syntax: $( ".selector" ).button({ c
1 min read