jQuery UI 实例 - 按钮（Button）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 实例 - 按钮（Button）</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.button-style {
padding: 10px 20px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button-style:hover {background-color: #3e8e41}
.button-style:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<script>
$(function() {
$(".button-style").button();
$("#radios").buttonset();
});
</script>
</head>
<body>
<button class="button-style">默认按钮</button>
<div id="radios">
<input type="radio" id="radio1" name="radio" checked="checked">
<label for="radio1">选项 1</label>
<input type="radio" id="radio2" name="radio">
<label for="radio2">选项 2</label>
</div>
</body>
</html>这个代码实例展示了如何使用jQuery UI库中的按钮（Button）部件来创建一个自定义样式的按钮，并使用按钮集（Button Set）来创建一组单选按钮。这个实例简单明了，并且可以直接复制粘贴到你的项目中使用。
评论已关闭