告别排版焦虑：Markdown一键转公众号格式，这几款工具让创作回归纯粹
2026/7/2 1:39:16
jQuery EasyUI 菜单与按钮 - 创建链接按钮（Link Button）
jQuery EasyUI的linkbutton组件是一个美化的超链接按钮（基于<a>标签），支持图标、文本、不同大小、纯图标模式、启用/禁用状态、切换（toggle）等功能。它常用于工具栏、表单操作按钮等场景。
官方参考：
- 文档：https://www.jeasyui.com/documentation/linkbutton.php
- 教程：https://www.jeasyui.com/tutorial/mb/linkbutton.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=LinkButton
步骤 1: 引入 EasyUI 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的 Link Button
最简单的方式：在<a>标签上添加class="easyui-linkbutton"。
<!-- 基本按钮 --><ahref="javascript:void(0)"class="easyui-linkbutton">普通按钮</a><!-- 带图标的按钮 --><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="iconCls:'icon-search'">搜索</a><!-- 带图标对齐左、纯文本模式 --><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="iconCls:'icon-add',iconAlign:'left'">新增</a><!-- 只显示图标（无文本） --><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="iconCls:'icon-edit'"></a><!-- 不同大小 --><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="size:'large',iconCls:'icon-save'">大按钮</a><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="size:'small'">小按钮</a>步骤 3: 纯样式按钮（plain 属性）
plain="true"使按钮更简洁，常用于工具栏。
<divstyle="padding:10px;background:#fafafa;"><ahref="javascript:void(0)"class="easyui-linkbutton"plain="true"iconCls="icon-add">新增</a><ahref="javascript:void(0)"class="easyui-linkbutton"plain="true"iconCls="icon-edit">编辑</a><ahref="javascript:void(0)"class="easyui-linkbutton"plain="true"iconCls="icon-remove">删除</a><ahref="javascript:void(0)"class="easyui-linkbutton"plain="true"iconCls="icon-save">保存</a></div>步骤 4: 启用/禁用 和 切换状态
<!-- 初始禁用按钮 --><aid="btn-disable"href="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-lock">禁用按钮</a><!-- 切换按钮（toggle） --><aid="btn-toggle"href="javascript:void(0)"class="easyui-linkbutton"data-options="toggle:true,group:'g1'">选项1</a><ahref="javascript:void(0)"class="easyui-linkbutton"data-options="toggle:true,group:'g1',selected:true">选项2</a><scripttype="text/javascript">$(function(){// 禁用按钮$('#btn-disable').linkbutton('disable');// 启用按钮（示例：点击其他按钮启用）$('.easyui-linkbutton').click(function(){$('#btn-disable').linkbutton('enable');});});</script>步骤 5: 完整示例（包含事件处理）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI Link Button 示例</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>jQuery EasyUI 链接按钮（Link Button）示例</h2><p>基本按钮：</p><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-ok"onclick="$.messager.alert('提示','点击了 OK 按钮')">OK</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel">Cancel</a><p>工具栏风格（plain）：</p><divstyle="padding:10px;background:#eee;"><ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-reload">刷新</a><ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-print">打印</a><ahref="#"class="easyui-linkbutton"plain="true"iconCls="icon-help">帮助</a></div><p>不同大小和状态：</p><ahref="#"class="easyui-linkbutton"data-options="size:'large',iconCls:'icon-save'">保存 (Large)</a><aid="disabledBtn"href="#"class="easyui-linkbutton"iconCls="icon-lock">初始禁用</a><script>$(function(){$('#disabledBtn').linkbutton('disable');// 初始禁用});</script></body></html>关键说明
- 创建方式：直接在
<a>上添加easyui-linkbutton类，最简单。 - 常用属性：
iconCls：图标类（来自 EasyUI 的 icon.css）。plain:true：简洁模式（无边框背景）。size:'large'|'small'：按钮大小。toggle:true：切换按钮（可选中/取消）。disabled:true：初始禁用。
- 方法：
$('#btn').linkbutton('disable')/'enable'/'resize'等。 - 事件：通过
onclick或 jQuery 绑定。
扩展
- 与menubutton结合：创建带下拉菜单的按钮（下一个教程常用）。
- 与toolbar结合：用于 datagrid、dialog 等工具栏。
更多示例：
- 官方创建链接按钮：https://www.jeasyui.com/tutorial/mb/linkbutton.php
- 样式自定义：https://www.jeasyui.com/demo/main/index.php?plugin=LinkButton
如果需要 menubutton（菜单按钮）、splitbutton（分裂按钮）或工具栏集成示例，请继续提问！