news 2026/4/16 18:56:05

jQuery EasyUI 菜单与按钮 - 创建链接按钮(Link Button)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 菜单与按钮 - 创建链接按钮(Link Button)

jQuery EasyUI 菜单与按钮 - 创建链接按钮(Link Button)

jQuery EasyUIlinkbutton组件是一个美化的超链接按钮(基于<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(分裂按钮)或工具栏集成示例,请继续提问!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 9:02:40

8、硬件与软件RAID构建全解析

硬件与软件RAID构建全解析 1. 硬件考量 在计算机硬件配置中,有几个关键的硬件因素需要我们仔细考虑,尤其是在涉及到存储系统时。 1.1 单连接器附件(SCA) 为了方便热插拔磁盘,IBM为SCSI硬盘引入了单连接器附件(SCA)。SCA将数据传输、电源和可配置选项(如SCSI ID)集…

作者头像 李华
网站建设 2026/4/16 9:06:43

从事网络安全需要高学历吗,说下我自己的看法

这几天有兄弟私聊我&#xff0c;问我从事网安方面的工作不需要学历吗&#xff1f;身边很多人都说学网安没必要到研究生。 我说下自己的一些看法吧。 目前来说确实很多从事安全行业的人员学历比较低&#xff0c;上次公众号做了一个调查&#xff0c;结果50%左右是本科以下学历。但…

作者头像 李华
网站建设 2026/4/15 13:05:48

【Linux 基础知识系列:第二百零二篇】网络端口转发工具:socat

一、简介&#xff1a;为什么必须掌握 socat&#xff1f;netcat 老了&#xff1a;nc 不支持 IPv6、SSL、fork 并发、串口参数细粒度控制&#xff0c;项目 2007 后基本停更。socat 持续进化&#xff1a;支持 100 协议与机制&#xff0c;官方称“Socket CAT——把任何双端数据流拼…

作者头像 李华
网站建设 2026/4/16 9:02:17

LobeChat蓝绿部署实施方案

LobeChat 蓝绿部署实施方案 在当今 AI 应用快速迭代的背景下&#xff0c;如何在不中断服务的前提下完成系统升级&#xff0c;已经成为企业级智能聊天平台的核心挑战之一。尤其是像 LobeChat 这类承载着用户长期会话、文件交互和多模型调用的 AI 助手门户&#xff0c;任何一次发…

作者头像 李华
网站建设 2026/4/16 9:08:02

2025年主流代码托管平台横向评测:本土化与全球化之争

2025年主流代码托管平台横向评测&#xff1a;本土化与全球化之争 在数字化转型加速的2025年&#xff0c;代码托管平台已成为开发者日常工作中不可或缺的基础设施。随着全球开发协作模式日益普及&#xff0c;如何选择适合团队需求的代码托管平台成为技术决策者的重要课题。本文将…

作者头像 李华