jQuery UI Button and Buttonset Widget

Filed Under: jQuery

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.

Options Usage Description
disabled $( “.selector” ).button({,disabled: true}); Disables the buttons it it is set to true.
icons $( “.selector” ).button({icons: { primary: “ui-icon-gear”, secondary: “ui-icon-triangle-1-s” }}); Specifies how icons are displayed, with or without text. By default, the primary icon is displayed on the left of the text and the secondary is displayed on its right.
label $( “.selector” ).button({label: “custom label”}); Text displayed in the button.
text $( “.selector” ).button({text: false}); Boolean value. Determines whether the text should display or not. the icons options should be enabled if its value is set to false.

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.

Methods Usage Description
destroy $( “.selector” ).button( “destroy” ); Removes the functionality completely.
disable $( “.selector” ).button( “disable” ); Disables the functionality
enable $( “.selector” ).button( “enable” ); Enables the functionality.
option $( “.selector” ).button( “option”, “disabled” ) Gets the current value associated with the specified optionName.
refresh $( “.selector” ).button( “refresh” ); Refresh the visual state.
widget $( “.selector” ).button( “widget” ); Returns a jQuery object containing the button widget.

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.

Event Usage Description
create( event, ui ) $( “.selector” ).button({,create: function( event, ui ) {}}); Event is triggered when the button is created.

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


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


<!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


<!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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages