news 2026/4/15 7:19:57

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/15 7:19:03

23、解锁量子优势:供应链优化的实用应用与案例研究

解锁量子优势:供应链优化的实用应用与案例研究 1. 供应链优化中的量子计算简介 随着全球供应链的复杂性不断增加,传统计算方法在处理海量数据和众多优化挑战时显得力不从心。量子计算作为一项革命性技术,有望突破经典计算的限制,为供应链优化开辟新的领域。 量子计算利用…

作者头像 李华
网站建设 2026/4/15 7:17:47

2025 CTF 解题思路终极指南:从入门到实战的全题型干货总结

前言&#xff1a;CTF 解题的核心逻辑&#xff08;2025 最新趋势&#xff09; CTF 竞赛已进入 “精细化对抗” 时代&#xff0c;2025 年赛事呈现三大特征&#xff1a;跨模块融合&#xff08;如 Web 密码学&#xff09;、实战化场景&#xff08;云环境 / API 调用&#xff09;、…

作者头像 李华
网站建设 2026/4/15 7:19:55

PC端商城纷纷开通网银支付功能

如今&#xff0c;越来越多的PC端商城纷纷开通网银支付功能&#xff0c;核心原因在于该支付方式能够为用户带来更优质的支付体验。商家只需通过报备白名单API接口&#xff0c;即可实现一次性对接多家银行的服务。当用户在商城完成下单流程并进入支付环节时&#xff0c;系统会跳转…

作者头像 李华
网站建设 2026/4/10 6:26:38

深度剖析GEO优化技术:AI搜索浪潮下的推广创新策略

2025年&#xff0c;用户获取信息的方式正在改变。当企业还在为搜索广告的高成本和传统SEO的漫长周期发愁时&#xff0c;AI搜索平台已悄然成为新的流量入口。GEO优化&#xff08;生成式引擎优化&#xff09;应运而生&#xff0c;它让企业信息在AI回答中被推荐&#xff0c;而不是…

作者头像 李华
网站建设 2026/4/13 4:58:31

EmotiVoice语音合成在图书馆自助服务系统中的便捷应用

EmotiVoice语音合成在图书馆自助服务系统中的便捷应用 在一座现代化的智慧图书馆里&#xff0c;一位视障读者轻轻触碰自助终端屏幕&#xff0c;询问&#xff1a;“《平凡的世界》在哪里&#xff1f;”几秒钟后&#xff0c;一个温和、清晰且略带关切语气的声音响起&#xff1a;“…

作者头像 李华