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 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的 Link Button
最简单的方式：在 <a> 标签上添加 class="easyui-linkbutton"。
<!-- 基本按钮 -->
<a href="javascript:void(0)" class="easyui-linkbutton">普通按钮</a>
<!-- 带图标的按钮 -->
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<!-- 带图标对齐左、纯文本模式 -->
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',iconAlign:'left'">新增</a>
<!-- 只显示图标（无文本） -->
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"></a>
<!-- 不同大小 -->
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="size:'large',iconCls:'icon-save'">大按钮</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="size:'small'">小按钮</a>步骤 3: 纯样式按钮（plain 属性）
plain="true" 使按钮更简洁，常用于工具栏。
<div style="padding:10px;background:#fafafa;">
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-add">新增</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-edit">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-remove">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-save">保存</a>
</div>步骤 4: 启用/禁用 和 切换状态
<!-- 初始禁用按钮 -->
<a id="btn-disable" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-lock">禁用按钮</a>
<!-- 切换按钮（toggle） -->
<a id="btn-toggle" href="javascript:void(0)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">选项1</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">选项2</a>
<script type="text/javascript">
$(function(){
// 禁用按钮
$('#btn-disable').linkbutton('disable');
// 启用按钮（示例：点击其他按钮启用）
$('.easyui-linkbutton').click(function(){
$('#btn-disable').linkbutton('enable');
});
});
</script>步骤 5: 完整示例（包含事件处理）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Link Button 示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>jQuery EasyUI 链接按钮（Link Button）示例</h2>
<p>基本按钮：</p>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="$.messager.alert('提示','点击了 OK 按钮')">OK</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
<p>工具栏风格（plain）：</p>
<div style="padding:10px;background:#eee;">
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">刷新</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">打印</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help">帮助</a>
</div>
<p>不同大小和状态：</p>
<a href="#" class="easyui-linkbutton" data-options="size:'large',iconCls:'icon-save'">保存 (Large)</a>
<a id="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（分裂按钮）或工具栏集成示例，请继续提问！
