news 2026/6/23 21:38:45

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/6/23 18:49:43

【JVS更新日志】物联网、低代码、项目管理12.17更新说明!

项目介绍 JVS是企业级数字化服务构建的基础脚手架&#xff0c;主要解决企业信息化项目交付难、实施效率低、开发成本高的问题&#xff0c;采用微服务配置化的方式&#xff0c;提供了低代码数据分析物联网的核心能力产品&#xff0c;并构建了协同办公、企业常用的管理工具等&…

作者头像 李华
网站建设 2026/6/23 0:00:27

网络安全证书合集,看这一篇就够啦!

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;网络安全行业也因此备受瞩目。在这一领域中&#xff0c;持有权威证书的专业人才备受欢迎。本文将为您介绍网络安全行业的热门证书&#xff0c;帮助您更好地了解这一行业&#xff0c;并为自己的职业发展提供…

作者头像 李华
网站建设 2026/6/23 12:00:33

打卡信奥刷题(2549)用C++实现信奥 P2113 看球泡妹子

P2113 看球泡妹子 题目背景 2014 年巴西世界杯开幕了&#xff0c;现在满城皆是世界杯&#xff0c;商家们利用它大赚一笔&#xff0c;小明和小红也借此机会增进感情。 题目描述 本届世界杯共有 nnn 支球队&#xff0c;mmm 场比赛。男球迷小明喜欢看比赛&#xff0c;女球迷小红喜…

作者头像 李华
网站建设 2026/6/23 19:53:32

四天学会一本书的公司靠谱吗

四天学会一本书的公司靠谱吗&#xff1f;深度解析速成教育的真相与选择在知识焦虑与效率至上的时代&#xff0c;“四天学会一本书”这样的宣传语无疑极具诱惑力。各类培训机构&#xff0c;尤其是以技能提升和资格认证为导向的公司&#xff0c;纷纷推出此类短期速成课程&#xf…

作者头像 李华
网站建设 2026/6/23 14:04:05

低成本高质量:为何越来越多团队选择EmotiVoice?

低成本高质量&#xff1a;为何越来越多团队选择EmotiVoice&#xff1f; 在短视频、播客和互动游戏内容爆发的今天&#xff0c;个性化语音不再只是“锦上添花”&#xff0c;而是用户体验的核心组成部分。然而&#xff0c;要实现自然流畅、富有情感、还能定制音色的语音合成&…

作者头像 李华
网站建设 2026/6/23 19:48:10

EmotiVoice与主流语音框架对比:兼容性与扩展性优势

EmotiVoice与主流语音框架对比&#xff1a;兼容性与扩展性优势 在智能内容创作和人机交互日益深化的今天&#xff0c;用户对语音合成系统的要求早已超越“能听清”的基本功能&#xff0c;转向“有情感”、“像真人”、“可定制”的高阶体验。传统云服务型TTS虽然语音自然度不断…

作者头像 李华