jQuery UI Example - Button
Enhance the functionality of standard form elements (such as buttons, input fields, and anchors) with themable buttons that have appropriate hover and active styles.
For more details about the button widget, please refer to the API documentation Button Widget.
Default Functionality
Examples of markup that can be used for buttons: a button element, an input element 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="http://jqueryui.com/resources/demos/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="#">An anchor</a>
</body>
</html>
Checkboxes
Display checkboxes as toggle buttons with the button widget. The label element associated with the checkbox serves as the button text.
This example demonstrates three checkboxes displayed as button-style toggles 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="http://jqueryui.com/resources/demos/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>
Icons
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="http://jqueryui.com/resources/demos/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 only icon</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>
Radio
Three radio buttons transformed into a set of buttons.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radio</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://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Option 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Option 3</label>
</div>
</form>
</body>
</html>
Split Button
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Split Button</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://jqueryui.com/resources/demos/style.css">
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
<script>
$(function() {
$( "#rerun" )
.button()
.click(function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
</head>
<body>
<div>
<div>
<button id="rerun">Run Last Action</button>
<button id="select">Select an Action</button>
</div>
<ul>
<li><a href="#">Open...</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</body>
</html>
Toolbar
A toolbar for a media player. Here's the basic markup: some button elements, a Shuffle button which is an input of type checkbox, and Repeat options which are three inputs of type radio.
<!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="http://jqueryui.com/resources/demos/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">Beginning</button>
<button id="rewind">Rewind</button>
<button id="play">Play</button>
<button id="stop">Stop</button>
<button id="forward">Forward</button>
<button id="end">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>
View Demo ```