jQuery UI & Button: Simple Buttons

This entry is part 1 of 5 in the series jQuery UI Button

jQuery UI Button – Default functionality

Here we have some simple examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('input[type=submit], a, button')
                    .button()
                    .click(function (event) {
                        event.preventDefault();
                    });
        });
    </script>
</head>
<body>

<button>A button element</button>

<input type='submit' value='A submit button'>

<a href='http://yahoo.com'>An anchor</a>

</body>
</html>
Try The Code

TheĀ event.preventDefault() will prevent the default event to be carried out.

For example, when you click on the anchor button, you will not be brought to yahoo.com.

jQuery UI & Buttons: Mediaplayer Toolbar

This entry is part 2 of 5 in the series jQuery UI Button

jQuery UI Button – Toolbar

A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Toolbar</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #toolbar {
            padding: 4px;
            display: inline-block;
        }

        /* support: IE7 */
        * + html #toolbar {
            display: inline;
        }
    </style>
    <script>
        $(function () {
            $('#beginning').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-start'
                }
            });
            $('#rewind').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-prev'
                }
            });
            $('#play').button({
                text: false,
                icons: {
                    primary: 'ui-icon-play'
                }
            })
                    .click(function () {
                        var options;
                        if ($(this).text() === 'play') {
                            options = {
                                label: 'pause',
                                icons: {
                                    primary: 'ui-icon-pause'
                                }
                            };
                        } else {
                            options = {
                                label: 'play',
                                icons: {
                                    primary: 'ui-icon-play'
                                }
                            };
                        }
                        $(this).button('option', options);
                    });
            $('#stop').button({
                text: false,
                icons: {
                    primary: 'ui-icon-stop'
                }
            })
                    .click(function () {
                        $('#play').button('option', {
                            label: 'play',
                            icons: {
                                primary: 'ui-icon-play'
                            }
                        });
                    });
            $('#forward').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-next'
                }
            });
            $('#end').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-end'
                }
            });
            $('#shuffle').button();
            $('#repeat').buttonset();
        });
    </script>
</head>
<body>

<div id='toolbar' class='ui-widget-header ui-corner-all'>
    <button id='beginning'>go to beginning</button>
    <button id='rewind'>rewind</button>
    <button id='play'>play</button>
    <button id='stop'>stop</button>
    <button id='forward'>fast forward</button>
    <button id='end'>go to end</button>

    <input type='checkbox' id='shuffle'><label for='shuffle'>Shuffle</label>
 
  <span id='repeat'>
    <input type='radio' id='repeat0' name='repeat' checked='checked'><label for='repeat0'>No Repeat</label>
    <input type='radio' id='repeat1' name='repeat'><label for='repeat1'>Once</label>
    <input type='radio' id='repeatall' name='repeat'><label for='repeatall'>All</label>
  </span>
</div>

</body>
</html>
Try The Code

jQuery UI & Button: Checkbox

This entry is part 3 of 5 in the series jQuery UI Button

jQuery UI Button – Checkboxes

A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Checkboxes</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#check').button();
            $('#format').buttonset();
        });
    </script>
    <style>
        #format {
            margin-top: 2em;
        }
    </style>
</head>
<body>

<input type='checkbox' id='check'><label for='check'>Toggle</label>

<div id='format'>
    <input type='checkbox' id='check1'><label for='check1'>B</label>
    <input type='checkbox' id='check2'><label for='check2'>I</label>
    <input type='checkbox' id='check3'><label for='check3'>U</label>
</div>

</body>
</html>
Try The Code

jQuery UI & Button: Radio Button

This entry is part 4 of 5 in the series jQuery UI Button

jQuery UI Button – Radios

Here, a set of three radio buttons transformed into a button set.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Radios</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#radio').buttonset();
        });
    </script>
</head>
<body>

<form>
    <div id='radio'>
        <input type='radio' id='radio1' name='radio'><label for='radio1'>Choice 1</label>
        <input type='radio' id='radio2' name='radio' checked='checked'><label for='radio2'>Choice 2</label>
        <input type='radio' id='radio3' name='radio'><label for='radio3'>Choice 3</label>
    </div>
</form>

</body>
</html>
Try The Code

jQuery UI & Button: Buttons with Icons

This entry is part 5 of 5 in the series jQuery UI Button

jQuery UI Button – Icons

Here are some buttons with various combinations of text and icons.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Icons</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('button:first').button({
                icons: {
                    primary: 'ui-icon-locked'
                },
                text: false
            }).next().button({
                icons: {
                    primary: 'ui-icon-locked'
                }
            }).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>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</body>
</html>
Try The Code