JqueryUI Tutorial
JqueryUI Interactions
JqueryUI Widgets
JqueryUI Effects
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
JqueryUI Interactions
- JqueryUI - Sortable
- JqueryUI - Selectable
- JqueryUI - Resizable
- JqueryUI - Droppable
- JqueryUI - Draggable
JqueryUI Widgets
- JqueryUI - Tooltip
- JqueryUI - Tabs
- JqueryUI - Spinner
- JqueryUI - Slider
- JqueryUI - Progressbar
- JqueryUI - Menu
- JqueryUI - Dialog
- JqueryUI - Datepicker
- JqueryUI - Button
- JqueryUI - Autocomplete
- JqueryUI - Accordion
JqueryUI Effects
- JqueryUI - Toggle Class
- JqueryUI - Toggle
- JqueryUI - Switch Class
- JqueryUI - Show
- JqueryUI - Remove Class
- JqueryUI - Hide
- JqueryUI - Effect
- JqueryUI - Color Animation
- JqueryUI - Add Class
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
JqueryUI - Button
JqueryUI - Button
jQueryUI provides button() method to transform the HTML elements (pke buttons, inputs and anchors) into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.
In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calpng .buttonset().
Syntax
The button() method can be used in two forms −
Method
Method
$ (selector, context).button (options) Method
The button (options) method declares that an HTML element should be treated as button. The options parameter is an object that specifies the behavior and appearance of the button.
Syntax
$(selector, context).button (options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).button({option1: value1, option2: value2..... });
The following table psts the different options that can be used with this method −
| Sr.No. | Option & Description |
|---|---|
| 1 |
This option deactivates the button is set to true. By default its value is false. |
| 2 |
This option specifies that one or two icons are to be displayed in the button: primary icons to the left, secondary icons to the right. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null. |
| 3 |
This option specifies text to display on the button that overrides the natural label. If omitted, the natural label for the element is displayed. In the case of radio buttons and checkboxes, the natural label is the <label> element associated with the control. By default its value is null. |
| 4 |
This option specifies whether text is to be displayed on the button. If specified as false, text is suppressed if (and only if) the icons option specifies at least one icon. By default its value is true. |
Default Functionapty
The following example demonstrates a simple example of button widget functionapty, passing no parameters to the button() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<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>
<script>
$(function() {
$( "#button-1, #button-2, #button-3, #button-4" ).button();
$( "#button-5" ).buttonset();
});
</script>
</head>
<body>
<button id = "button-1">A button element</button>
<input id = "button-2" type = "submit" value = "A submit button">
<a id = "button-3" href = "">An anchor</a>
<input type = "checkbox" id = "button-4" >
<label for = "button-4">Toggle</label>
<br><br>
<span id = "button-5">
<input type = "checkbox" id = "check1">
<label for = "check1">Left</label>
<input type = "checkbox" id = "check2">
<label for = "check2">Middle</label>
<input type = "checkbox" id = "check3">
<label for = "check3">Right</label>
</span>
</body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
This example demonstrates the markup that can be used for buttons: A button element, an input of type submit and an anchor.
Use of icons, text and disabled
The following example demonstrates the usage of two options icons, text and disabled in the button function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<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>
<script>
$(function() {
$( "#button-6" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#button-7" ).button({
disabled:true
});
$( "#button-8" ).button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
</head>
<body>
<button id = "button-6">
Button with icon only
</button>
<button id = "button-7">
Button Disabled
</button>
<button id = "button-8">
Button with two icons
</button>
</body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Here you can see a button with only icon, a button with two icons and a disabled button.
$ (selector, context).button ("action", params) Method
The button ("action", params) method can perform an action on buttons, such as disabpng the button. The action is specified as a string in the first argument (e.g., "disable" to disable button). Check out the actions that can be passed, in the following table.
Syntax
$(selector, context).button ("action", params);
The following table psts the different actions that can be used with this method −
| Sr.No. | Action & Description |
|---|---|
| 1 |
This action removes the button functionapty of an element completely. The elements return to their pre-init state. This method does not accept any arguments. |
| 2 |
This action disables the button functionapty of an element. This method does not accept any arguments. |
| 3 |
This action enables the button functionapty of an element. This method does not accept any arguments. |
| 4 |
This action retrieves the value of the option specified in optionName. Where optionName is a String. |
| 5 |
This action retrieves an object containing key/value pairs representing the current button options hash. |
| 6 |
This action sets the value of the button option associated with the specified optionName. |
| 7 |
This action sets one or more options for the button. Where options is map of option-value pairs to set. |
| 8 |
This action refreshes the display of the button. This is useful when the buttons are handled by the program and the display does not necessarily correspond to the internal state. This method does not accept any arguments. |
| 9 |
This action returns a jQuery object containing the button element. This method does not accept any arguments. |
Example
Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() and disable() methods.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<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>
<script>
$(function() {
$( "#button-9" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#button-9" ).button( destroy );
$( "#button-10" ).button({
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#button-10" ).button( disable );
$( "#button-11" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
});
});
</script>
</head>
<body>
<button id = "button-9">
I m destroyed
</button>
<button id = "button-10">
I m disabled
</button>
<button id = "button-11">
play
</button>
</body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output −
Event Management on Buttons
In addition to the button (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are psted below −
| Sr.No. | Event Method & Description |
|---|---|
| 1 |
This event is triggered when the button is created. Where event is of type Event, and ui is of type Object. |
Example
The following example demonstrates the event method usage for button widget functionapty. This example demonstrates the use of event create.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionapty</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<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>
<style>
.resultarea {
background: #cedc98;
border-top: 1px sopd #000000;
border-bottom: 1px sopd #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#button-12" ).button({
create: function() {
$("p#result").html ($("p#result")
.html () + "<b>created</b><br>");
}
});
});
</script>
</head>
<body>
<button id = "button-12">
A button element
</button>
<p class = "resultarea" id = result></p>
</body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
Advertisements