news 2026/5/10 17:35:16

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/5/9 21:25:08

编程新人别硬卷!网安:起薪高20%,3年就能当骨干

为什么说学编程不如直接去学网络安全&#xff1f; 一、先看一组扎心对比&#xff1a;市场真的不一样 程序员 &#xff1a;2024 智联招聘数据显示&#xff0c;Java 开发岗平均 1 岗 38 人竞争&#xff0c;应届生起薪中位数仅 7800 元&#xff1b;某大厂 2024 校招开发岗简历通过…

作者头像 李华
网站建设 2026/5/10 3:42:37

【Linux 基础知识系列:第二百零三篇】Linux 系统账户安全加固

一、简介&#xff1a;为什么要“折腾”账户安全&#xff1f;MITRE ATT&CK 矩阵把“Valid Accounts”列为 Top 1 入口&#xff1a;2022 年 80% 勒索软件通过 弱口令/爆破 root 入场。合规要求&#xff1a;等保 2.0 要求“默认账户管理、口令复杂度、权限最小化”。SOC2、ISO…

作者头像 李华
网站建设 2026/5/9 10:34:18

通达信彩带表示的macd

{}W:1; M:1; MM:9*M; SHORT:MM*4/3; LONG:MM*26/9; DIFF:(EMA(CLOSE,SHORT)-EMA(CLOSE,LONG)); DEA:EMA(DIFF,MM),COLOR58FF58; MACD:2*(DIFF-DEA),COLORFFFF00,LINETHICK0; 红柱:DRAWBAND(MACD,RGB(180,50,50),0,RGB(0,128,0)); 绿柱:DRAWBAND(0,RGB(0,128,0),MACD,RGB(180,50…

作者头像 李华
网站建设 2026/5/10 7:12:43

双机热备全景剖析:从技术原理到角色视角的深度解构【20251217】001篇

文章目录 双机热备全景剖析:从技术原理到角色视角的深度解构 开篇:为何“永不宕机”成为数字时代的生死线? 第一章 本源探究:3W1H框架解构双机热备核心 1.1 WHAT(是什么)—— 技术本质的多层透视 1.2 WHY(为什么)—— 业务连续性的数字经济学 1.3 WHERE(用在哪里)——…

作者头像 李华
网站建设 2026/5/10 7:12:42

双机热备:从背景到实践的深度剖析【20251217】002篇

文章目录 **双机热备:从背景到实践的深度剖析** **前言:为什么需要“双机热备”?** 第一章:What —— 什么是双机热备? 1.1 定义(专业角度) 1.2 大白话解释(生活类比) 第二章:Why —— 为什么要用双机热备? 2.1 技术动因:单点故障是万恶之源 (1)硬件层面不可靠性…

作者头像 李华