“生活中的混凝土2025/26”获奖作品公布——全球精彩摄影作品展现混凝土艺术之美
2026/4/24 2:42:21
jQuery UI Button（按钮）实例
Button是 jQuery UI 中最基础但非常实用的组件，它可以将普通的<button>、<input>、<a>元素美化为统一风格的按钮，支持图标、禁用状态、单选/复选按钮组等。常用于表单、工具栏、统一页面按钮风格。
官方演示地址：https://jqueryui.com/button/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础按钮美化
将各种元素统一为 jQuery UI 风格按钮。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Button 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><button>普通 button</button><inputtype="submit"value="输入 submit"><inputtype="button"value="输入 button"><ahref="#"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-*）。
<buttonid="save">保存</button><buttonid="print">打印</button><buttonid="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 美化为按钮样式。
<!-- 复选按钮组 --><divid="format"><inputtype="checkbox"id="bold"name="format"><labelfor="bold">粗体</label><inputtype="checkbox"id="italic"name="format"><labelfor="italic">斜体</label><inputtype="checkbox"id="underline"name="format"><labelfor="underline">下划线</label></div><!-- 单选按钮组 --><divid="size"><inputtype="radio"id="small"name="size"><labelfor="small">小</label><inputtype="radio"id="medium"name="size"checked><labelfor="medium">中</label><inputtype="radio"id="large"name="size"><labelfor="large">大</label></div><script>$("#format, #size").buttonset();// buttonset() 用于分组</script>4.工具栏（Toolbar）与禁用状态
<divid="toolbar"class="ui-widget-header ui-corner-all"style="padding:10px;"><buttonid="undo">撤销</button><buttonid="redo">重做</button><spanclass="ui-buttonset"><button>左对齐</button><button>居中</button><button>右对齐</button></span><buttonid="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）示例，或完整富文本编辑器工具栏，告诉我！