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'>
    <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='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
            $('input[type=submit], a, button')
                    .click(function (event) {

<button>A button element</button>

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

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

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.

Series Navigation
jQuery UI & Buttons: Mediaplayer Toolbar >>

Leave a comment

Leave a Reply