jQuery UI Button（按钮）实例
Button 是 jQuery UI 中最基础但非常实用的组件，它可以将普通的 <button>、<input>、<a> 元素美化为统一风格的按钮，支持图标、禁用状态、单选/复选按钮组等。常用于表单、工具栏、统一页面按钮风格。
官方演示地址：https://jqueryui.com/button/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础按钮美化
将各种元素统一为 jQuery UI 风格按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Button 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<button>普通 button</button>
<input type="submit" value="输入 submit">
<input type="button" value="输入 button">
<a href="#" class="ui-button">链接 a 标签</a>
<script>
$(function() {
$("button, input[type=submit], input[type=button], a.ui-button").button();
});
</script>
</body>
</html>2. 带图标的按钮
支持左侧/右侧图标（使用 jQuery UI 内置图标类 ui-icon-*）。
<button id="save">保存</button>
<button id="print">打印</button>
<button id="only-icon"></button>
<script>
$("#save").button({
icon: "ui-icon-disk", // 左侧图标
showLabel: true // 显示文字（默认 true）
});
$("#print").button({
icon: "ui-icon-print",
iconPosition: "end" // 图标在右侧
});
$("#only-icon").button({
icon: "ui-icon-heart",
showLabel: false // 只显示图标
});
</script>3. 复选框和单选按钮组（Checkbox & Radio）
将原生 checkbox/radio 美化为按钮样式。
<!-- 复选按钮组 -->
<div id="format">
<input type="checkbox" id="bold" name="format"><label for="bold">粗体</label>
<input type="checkbox" id="italic" name="format"><label for="italic">斜体</label>
<input type="checkbox" id="underline" name="format"><label for="underline">下划线</label>
</div>
<!-- 单选按钮组 -->
<div id="size">
<input type="radio" id="small" name="size"><label for="small">小</label>
<input type="radio" id="medium" name="size" checked><label for="medium">中</label>
<input type="radio" id="large" name="size"><label for="large">大</label>
</div>
<script>
$("#format, #size").buttonset(); // buttonset() 用于分组
</script>4. 工具栏（Toolbar）与禁用状态
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:10px;">
<button id="undo">撤销</button>
<button id="redo">重做</button>
<span class="ui-buttonset">
<button>左对齐</button>
<button>居中</button>
<button>右对齐</button>
</span>
<button id="disable-btn">禁用我</button>
</div>
<script>
$("#toolbar button").button({
iconPosition: "top" // 图标在上方（适合工具栏）
});
$("#undo").button({ icon: "ui-icon-arrowreturnthick-1-w" });
$("#redo").button({ icon: "ui-icon-arrowreturnthick-1-e" });
$("#disable-btn").button("option", "disabled", true); // 禁用按钮
</script>小技巧：
- 所有按钮初始化后可动态修改：
$("#myBtn").button("disable")或"enable" - 图标列表查看：https://api.jqueryui.com/theming/icons/ （常见如
ui-icon-search、ui-icon-trash等） - 配合 ThemeRoller 可自定义按钮颜色、圆角等（https://jqueryui.com/themeroller/）
Button 组件虽简单，但能快速统一页面交互风格。如果你需要 带下拉菜单的按钮、分割按钮（split button） 示例，或 完整富文本编辑器工具栏，告诉我！
