当前位置：首页 > news >正文

jQuery EasyUI 菜单与按钮 - 创建链接按钮（Link Button）

news 2026/6/3 0:25:02

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 绑定。