jQuery UI provides two widgets called Button and Buttonset Widget for creating themeable buttons. We can use these widgets to enhance the look and feel of standard form elements like buttons, inputs, anchors etc. These widgets use the jQuery UI CSS framework to enhance its look and feel.
Button and Buttonset
We can also convert radio buttons and check boxes to themeable buttons using Button widget. The Buttonset widget can be used to group related buttons in to a set, like grouping radio buttons. We can access Buttonset and Button widgets using buttonset() and button() methods respectively. Since these widgets are combined into a single file, we You can use all of the methods in the button widget with Buttonset .
Contents
Button Widget Options
In this section, we will discuss about different options available to customize the jQueryUI Button widget.
The above table briefly describes all the available options in the jQueryUI Button widget.
Button Widget Methods
In this section, we will look into the jQueryUI Button widget methods and its syntax. These methods are very useful when you deal with the Button and Buttonset widgets.
The above table briefly describes all the available methods in the jQueryUI Button widget.
Button Widget Events
There is only one event associated with the button widget in jQuery UI, the create event.
Button Widget in Action
In this section, we will go through some of the methods and options available in Button and Buttonset widget
Simple Button Example
The following example demonstrates the default functionality of button(). In the following example, you will see how to create themeable buttons for simple button element and anchor element.
simplebutton.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $("a, button") .button() .click(function(event) { event.preventDefault(); }); }); </script> </head> <body> <button>Simple button</button> <a href="https://www.journaldev.com/9136/#">Simple Anchor</a> </body> </html> |
You will see the following output on your browser.
Simple Buttonset Example
The following example demonstrates the usage of buttonset().
simpleButtonset.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI ButtonSet</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css"> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $("#radio").buttonset(); }); </script> </head> <body> <form> <div id="radio"> <input type="radio" id="rad1" name="radio"> <label for="rad1">Cricket</label> <input type="radio" id="rad3" name="radio" checked="checked"> <label for="rad3">KickBoxing</label> <input type="radio" id="rad2" name="radio"> <label for="rad2">Football</label> </div> </form> </body> </html> |
You will see the following output on your browser.
Using icons and next options
The following example demonstrates the usage of icons and text options available in button widget.
buttonIcons.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Icons</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css"> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $("button:first").button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script> </head> <body> <button>First button</button> <button>Second button</button> <button>Third Button</button> </body> </html> |
You will see the following output on your browser.
The first and third button is displayed without text since we set the value of text option to false. The primary icon is displayed on the left and secondary on the right.
That’s all for now. I hope you will try all the methods and options available in Button and Buttonset widget. We will discuss about more widgets and jQuery features in the coming posts.