2026/1/9 18:51:05
网站建设
项目流程
注销网站 注销主体,国家企业信用信息查询公示系统广东,南昌哪里可以做企业网站,深圳网站维护公司jQuery EasyUI 菜单与按钮 - 创建链接按钮#xff08;Link Button#xff09;
jQuery EasyUI 的 linkbutton 组件是一个美化的超链接按钮#xff08;基于 a 标签#xff09;#xff0c;支持图标、文本、不同大小、纯图标模式、启用/禁用状态、切换#xff08;to…jQuery EasyUI 菜单与按钮 - 创建链接按钮Link ButtonjQuery EasyUI的linkbutton组件是一个美化的超链接按钮基于a标签支持图标、文本、不同大小、纯图标模式、启用/禁用状态、切换toggle等功能。它常用于工具栏、表单操作按钮等场景。官方参考文档https://www.jeasyui.com/documentation/linkbutton.php教程https://www.jeasyui.com/tutorial/mb/linkbutton.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginLinkButton步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建基本的 Link Button最简单的方式在a标签上添加classeasyui-linkbutton。!-- 基本按钮 --ahrefjavascript:void(0)classeasyui-linkbutton普通按钮/a!-- 带图标的按钮 --ahrefjavascript:void(0)classeasyui-linkbuttondata-optionsiconCls:icon-search搜索/a!-- 带图标对齐左、纯文本模式 --ahrefjavascript:void(0)classeasyui-linkbuttondata-optionsiconCls:icon-add,iconAlign:left新增/a!-- 只显示图标无文本 --ahrefjavascript:void(0)classeasyui-linkbuttondata-optionsiconCls:icon-edit/a!-- 不同大小 --ahrefjavascript:void(0)classeasyui-linkbuttondata-optionssize:large,iconCls:icon-save大按钮/aahrefjavascript:void(0)classeasyui-linkbuttondata-optionssize:small小按钮/a步骤 3: 纯样式按钮plain 属性plaintrue使按钮更简洁常用于工具栏。divstylepadding:10px;background:#fafafa;ahrefjavascript:void(0)classeasyui-linkbuttonplaintrueiconClsicon-add新增/aahrefjavascript:void(0)classeasyui-linkbuttonplaintrueiconClsicon-edit编辑/aahrefjavascript:void(0)classeasyui-linkbuttonplaintrueiconClsicon-remove删除/aahrefjavascript:void(0)classeasyui-linkbuttonplaintrueiconClsicon-save保存/a/div步骤 4: 启用/禁用 和 切换状态!-- 初始禁用按钮 --aidbtn-disablehrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-lock禁用按钮/a!-- 切换按钮toggle --aidbtn-togglehrefjavascript:void(0)classeasyui-linkbuttondata-optionstoggle:true,group:g1选项1/aahrefjavascript:void(0)classeasyui-linkbuttondata-optionstoggle:true,group:g1,selected:true选项2/ascripttypetext/javascript$(function(){// 禁用按钮$(#btn-disable).linkbutton(disable);// 启用按钮示例点击其他按钮启用$(.easyui-linkbutton).click(function(){$(#btn-disable).linkbutton(enable);});});/script步骤 5: 完整示例包含事件处理!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titlejQuery EasyUI Link Button 示例/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodyh2jQuery EasyUI 链接按钮Link Button示例/h2p基本按钮/pahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-okonclick$.messager.alert(提示,点击了 OK 按钮)OK/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-cancelCancel/ap工具栏风格plain/pdivstylepadding:10px;background:#eee;ahref#classeasyui-linkbuttonplaintrueiconClsicon-reload刷新/aahref#classeasyui-linkbuttonplaintrueiconClsicon-print打印/aahref#classeasyui-linkbuttonplaintrueiconClsicon-help帮助/a/divp不同大小和状态/pahref#classeasyui-linkbuttondata-optionssize:large,iconCls:icon-save保存 (Large)/aaiddisabledBtnhref#classeasyui-linkbuttoniconClsicon-lock初始禁用/ascript$(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?pluginLinkButton如果需要 menubutton菜单按钮、splitbutton分裂按钮或工具栏集成示例请继续提问