热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

菜单和按钮EasyUIMenu菜单、EasyUILinkbutton链接按钮、EasyUIMenubutton菜单按钮、EasyUISplitbutton分割按钮...

EasyUIMenu菜单通过$.fn.menu.defaults重写默认的defaults。菜单(Menu)通常用于上下文菜单。它是创建其他菜单组件&#
EasyUI Menu 菜单

通过 $.fn.menu.defaults 重写默认的 defaults。

菜单(Menu)通常用于上下文菜单。它是创建其他菜单组件(比如:menubutton、splitbutton)的基础组件。它也能用于导航和执行命令。

用法

创建菜单(Menu)

通过标记创建菜单(menu)应该添加 'easyui-menu' class 到

标记。每个菜单项(menu item)通过
标记创建。我们可以添加 'iconCls' 属性到菜单项(menu item),以定义一个显示在菜单项(menu item)左边的图标。添加 'menu-sep' class 到菜单项(menu item)将产生一个菜单(menu)分隔符。

<div id&#61;"mm" class&#61;"easyui-menu" style&#61;"width:120px;"><div>Newdiv><div><span>Openspan><div style&#61;"width:150px;"><div><b>Wordb>div><div>Exceldiv><div>PowerPointdiv>div>div><div data-options&#61;"iconCls:&#39;icon-save&#39;">Savediv><div class&#61;"menu-sep">div><div>Exitdiv>
div>

编程创建菜单&#xff08;menu&#xff09;并侦听 &#39;onClick&#39; 事件。

$(&#39;#mm&#39;).menu({onClick:function(item){//...}
});

显示菜单&#xff08;Menu&#xff09;

当菜单&#xff08;menu&#xff09;被创建时&#xff0c;它是隐藏不可见的。调用 &#39;show&#39; 方法来显示菜单&#xff08;menu&#xff09;。

$(&#39;#mm&#39;).menu(&#39;show&#39;, {left: 200,top: 100
});

菜单项

菜单项&#xff08;menu item&#xff09;代表一个显示在菜单中的单独的项目。它包含下列属性&#xff1a;

名称类型描述默认值
idstring菜单项&#xff08;menu item&#xff09;的 id 属性。 
textstring项目文本。 
iconClsstring在项目左边显示一个 16x16 图标的 CSS class。 
hrefstring当点击菜单项&#xff08;menu item&#xff09;时设置页面位置。 
disabledboolean定义是否禁用菜单项&#xff08;menu item&#xff09;。false
onclickfunction当点击菜单项&#xff08;menu item&#xff09;时被调用的函数。 

菜单属性

名称类型描述默认值
zIndexnumber菜单&#xff08;Menu&#xff09;的 z-index 样式&#xff0c;从它开始增加。110000
leftnumber菜单&#xff08;Menu&#xff09;的左边位置。0
topnumber菜单&#xff08;Menu&#xff09;的顶部位置。0
minWidthnumber菜单&#xff08;Menu&#xff09;的最小宽度。该属性自版本 1.3.2 起可用。120
hideOnUnhoverboolean如果设置为 true&#xff0c;当鼠标离开它时自动隐藏菜单&#xff08;menu&#xff09;。该属性自版本 1.3.5 起可用。true

菜单事件

名称参数描述
onShownone当菜单&#xff08;menu&#xff09;显示之后触发。
onHidenone当菜单&#xff08;menu&#xff09;隐藏之后触发。
onClickitem当点击菜单项&#xff08;menu item&#xff09;时触发。下面的实例演示如何处理所有菜单项点击&#xff1a;
  1. class&#61;"easyui-menu" data-options&#61;"onClick:menuHandler" style&#61;"width:120px;">
  2. data-options&#61;"name:&#39;new&#39;">New
  3. data-options&#61;"name:&#39;save&#39;,iconCls:&#39;icon-save&#39;">Save
  4. data-options&#61;"name:&#39;print&#39;,iconCls:&#39;icon-print&#39;">Print
  5. class&#61;"menu-sep">
  6. data-options&#61;"name:&#39;exit&#39;">Exit

菜单方法

名称参数描述
optionsnone返回选项&#xff08;options&#xff09;对象。
showpos在指定的位置显示菜单&#xff08;menu&#xff09;。
pos 参数有两个属性&#xff1a;
left&#xff1a;新的左边位置。
top&#xff1a;新的顶部位置。
hidenone隐藏菜单&#xff08;menu&#xff09;。
destroynone销毁菜单&#xff08;menu&#xff09;。
getItemitemEl获取包含 &#39;target&#39; 属性&#xff08;指示项目 DOM 元素&#xff09;的菜单项&#xff08;menu item&#xff09;属性。下面的实例演示如何通过 id 获取指定的项目&#xff1a;
  1. id&#61;"mm" class&#61;"easyui-menu" style&#61;"width:120px">
  2. New
  3. id&#61;"m-open">Open
  4. Save
  5.  
  6. var itemEl &#61; $(&#39;#m-open&#39;)[0]; // the menu item element
  7. var item &#61; $(&#39;#mm&#39;).menu(&#39;getItem&#39;, itemEl);
  8. console.log(item);
setTextparam给指定的菜单项&#xff08;menu item&#xff09;设置文本。&#39;param&#39; 参数包含两个属性&#xff1a;
target&#xff1a;DOM 对象&#xff0c;被设定的菜单项&#xff08;menu item&#xff09;。
text&#xff1a;string&#xff0c;新的文本值。

代码实例&#xff1a;
  1. var item &#61; $(&#39;#mm&#39;).menu(&#39;findItem&#39;, &#39;Save&#39;);
  2. $(&#39;#mm&#39;).menu(&#39;setText&#39;, {
  3. target: item.target,
  4. text: &#39;Saving&#39;
  5. });
setIconparam给指定的菜单项&#xff08;menu item&#xff09;设置图标。&#39;param&#39; 参数包含两个属性&#xff1a;
target&#xff1a;DOM 对象&#xff0c;即菜单项&#xff08;menu item&#xff09;。
iconCls&#xff1a;新图标的 CSS class。

代码实例&#xff1a;
  1. $(&#39;#mm&#39;).menu(&#39;setIcon&#39;, {
  2. target: $(&#39;#m-open&#39;)[0],
  3. iconCls: &#39;icon-closed&#39;
  4. });
findItemtext找到指定的菜单项&#xff08;menu item&#xff09;&#xff0c;返回对象与 getItem 方法相同。
代码实例&#xff1a;
  1. // find &#39;Open&#39; item and disable it
  2. var item &#61; $(&#39;#mm&#39;).menu(&#39;findItem&#39;, &#39;Open&#39;);
  3. $(&#39;#mm&#39;).menu(&#39;disableItem&#39;, item.target);
appendItemoptions追加一个新的菜单项&#xff08;menu item&#xff09;&#xff0c;&#39;param&#39; 参数指示新的项目属性。默认情况下&#xff0c;新增的项目将作为顶级菜单项&#xff08;menu item&#xff09;。如需追加一个子菜单项&#xff0c;需设置 &#39;parent&#39; 属性&#xff0c;用来指示已经有子项目的父项目元素。
代码实例&#xff1a;
  1. // append a top menu item
  2. $(&#39;#mm&#39;).menu(&#39;appendItem&#39;, {
  3. text: &#39;New Item&#39;,
  4. iconCls: &#39;icon-ok&#39;,
  5. onclick: function(){alert(&#39;New Item&#39;)}
  6. });
  7. // append a menu separator
  8. $(&#39;#mm&#39;).menu(&#39;appendItem&#39;, {
  9. separator: true
  10. });
  11. // append a sub menu item
  12. var item &#61; $(&#39;#mm&#39;).menu(&#39;findItem&#39;, &#39;Open&#39;); // find &#39;Open&#39; item
  13. $(&#39;#mm&#39;).menu(&#39;appendItem&#39;, {
  14. parent: item.target, // the parent item element
  15. text: &#39;Open Excel&#39;,
  16. iconCls: &#39;icon-excel&#39;,
  17. onclick: function(){alert(&#39;Open Excel&#39;)}
  18. });
removeItemitemEl移除指定的菜单项&#xff08;menu item&#xff09;。
enableItemitemEl启用菜单项&#xff08;menu item&#xff09;。
disableItemitemEl禁用菜单项&#xff08;menu item&#xff09;。
EasyUI Linkbutton 链接按钮

通过 $.fn.linkbutton.defaults 重写默认的 defaults。

链接按钮&#xff08;linkbutton&#xff09;用于创建一个超链接按钮。它是一个正常的 标记的表示。它可显示图标和文本&#xff0c;或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。

用法

创建链接按钮&#xff08;linkbutton&#xff09;

从标记创建链接按钮&#xff08;linkbutton&#xff09;更容易。

<a id&#61;"btn" href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>

编程创建链接按钮&#xff08;linkbutton&#xff09;也是允许的。

<a id&#61;"btn" href&#61;"#">easyuia>
$(&#39;#btn&#39;).linkbutton({iconCls: &#39;icon-search&#39;
});

处理链接按钮&#xff08;linkbutton&#xff09;上的点击。

链接按钮&#xff08;linkbutton&#xff09;上的点击将把用户引导到其他页面。

<a href&#61;"otherpage.php" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>

下面的实例将警告一个消息。

<a href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;"onclick&#61;"Javascript:alert(&#39;easyui&#39;)">easyuia>

使用 jQuery 绑定 click 处理程序。

<a id&#61;"btn" href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>

$(function(){$(&#39;#btn&#39;).bind(&#39;click&#39;, function(){alert(&#39;easyui&#39;);});
});

属性

名称类型描述默认值
idstring该组件的 id 属性。null
disabledboolean如果设置为 true&#xff0c;则禁用按钮。false
toggleboolean如果设置为 true&#xff0c;则允许用户切换按钮的选中状态。该属性自版本 1.3.3 起可用。false
selectedboolean定义按钮状态是否已选择。该属性自版本 1.3.3 起可用。false
groupstring指示按钮所属的分组名称。该属性自版本 1.3.3 起可用。null
plainboolean如果设置为 true&#xff0c;则显示一个简单的效果。false
textstring按钮文本。&#39;&#39;
iconClsstring在左边显示一个 16x16 图标的 CSS class。null
iconAlignstring按钮图标的位置。可能的值&#xff1a;&#39;left&#39;、&#39;right&#39;。该属性自版本 1.3.2 起可用。left

方法

名称参数描述
optionsnone返回选项&#xff08;options&#xff09;属性&#xff08;property&#xff09;。
disablenone禁用按钮。
代码实例&#xff1a;
  1. $(&#39;#btn&#39;).linkbutton(&#39;disable&#39;);
enablenone启用按钮。
代码实例&#xff1a;
  1. $(&#39;#btn&#39;).linkbutton(&#39;enable&#39;);
selectnone选中按钮。该方法自版本 1.3.3 起可用。
unselectnone未选中按钮。该方法自版本 1.3.3 起可用。
EasyUI Menubutton 菜单按钮

扩展自 $.fn.linkbutton.defaults。通过 $.fn.menubutton.defaults 重写默认的 defaults。

菜单按钮&#xff08;menubutton&#xff09;是下拉菜单的一部分。它与链接按钮&#xff08;linkbutton&#xff09;及菜单&#xff08;menu&#xff09;有关。显示链接按钮&#xff08;linkbutton&#xff09;&#xff0c;隐藏菜单&#xff08;menu&#xff09;。当用户点击或移动鼠标到链接按钮&#xff08;linkbutton&#xff09;上时&#xff0c;将显示菜单&#xff08;menu&#xff09;以允许用户点击菜单。

依赖

  • menu
  • linkbutton

用法

通常&#xff0c;菜单按钮&#xff08;menubutton&#xff09;以声明的方式从标记创建。

<a href&#61;"Javascript:void(0)" id&#61;"mb" class&#61;"easyui-menubutton"data-options&#61;"menu:&#39;#mm&#39;,iconCls:&#39;icon-edit&#39;">Edita>
<div id&#61;"mm" style&#61;"width:150px;"><div data-options&#61;"iconCls:&#39;icon-undo&#39;">Undodiv><div data-options&#61;"iconCls:&#39;icon-redo&#39;">Redodiv><div class&#61;"menu-sep">div><div>Cutdiv><div>Copydiv><div>Pastediv><div class&#61;"menu-sep">div><div data-options&#61;"iconCls:&#39;icon-remove&#39;">Deletediv><div>Select Alldiv>
div>

使用 Javascript 创建菜单按钮&#xff08;menubutton&#xff09;。

<a href&#61;"Javascript:void(0)" id&#61;"mb">Edita>
<div id&#61;"mm" style&#61;"width:150px">
...
div>

$(&#39;#mb&#39;).menubutton({iconCls: &#39;icon-edit&#39;,menu: &#39;#mm&#39;
});

属性

该属性扩展自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是菜单按钮&#xff08;menubutton&#xff09;增加的属性。

名称类型描述默认值
plainboolean如果设置为 true&#xff0c;则显示一个简单的效果。true
menustring用于创建对应菜单&#xff08;menu&#xff09;的选择器。null
durationnumber当悬停在按钮上时&#xff0c;以毫秒为单位定义的&#xff0c;显示菜单&#xff08;menu&#xff09;的持续时间。100

方法

该方法继承自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是菜单按钮&#xff08;menubutton&#xff09;增加的或重写的方法。

名称参数描述
optionsnone返回选项&#xff08;options&#xff09;对象。
disablenone禁用菜单按钮&#xff08;menubutton&#xff09;。
enablenone启用菜单按钮&#xff08;menubutton&#xff09;。
destroynone销毁菜单按钮&#xff08;menubutton&#xff09;。
EasyUI Splitbutton 分割按钮

扩展自 $.fn.linkbutton.defaults。通过 $.fn.splitbutton.defaults 重写默认的 defaults。

与菜单按钮&#xff08;menubutton&#xff09;相似&#xff0c;分割按钮&#xff08;splitbutton&#xff09;也与链接按钮&#xff08;linkbutton&#xff09;及菜单&#xff08;menu&#xff09;有关。与菜单按钮&#xff08;menubutton&#xff09;不同的是&#xff0c;分割按钮&#xff08;splitbutton&#xff09;被分割为两部分。当移动鼠标到分割按钮&#xff08;splitbutton&#xff09;上时&#xff0c;将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单&#xff08;menu&#xff09;。

依赖

  • menubutton

用法

从标记创建分割按钮&#xff08;splitbutton&#xff09;。

<a href&#61;"Javascript:void(0)" id&#61;"sb" class&#61;"easyui-splitbutton"data-options&#61;"menu:&#39;#mm&#39;,iconCls:&#39;icon-ok&#39;" onclick&#61;"Javascript:alert(&#39;ok&#39;)">Oka>
<div id&#61;"mm" style&#61;"width:100px;"><div data-options&#61;"iconCls:&#39;icon-ok&#39;">Okdiv><div data-options&#61;"iconCls:&#39;icon-cancel&#39;">Canceldiv>
div>

使用 Javascript 创建分割按钮&#xff08;splitbutton&#xff09;。

<a href&#61;"Javascript:void(0)" id&#61;"sb" onclick&#61;"Javascript:alert(&#39;ok&#39;)">Oka>
<div id&#61;"mm" style&#61;"width:100px;">
...
div>

$(&#39;#sb&#39;).splitbutton({iconCls: &#39;icon-ok&#39;,menu: &#39;#mm&#39;
});

属性

该属性扩展自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是分割按钮&#xff08;splitbutton&#xff09;增加的属性。

名称类型描述默认值
plainboolean如果设置为 true&#xff0c;则显示一个简单的效果。true
menustring用于创建对应菜单&#xff08;menu&#xff09;的选择器。null
durationnumber当悬停在按钮上时&#xff0c;以毫秒为单位定义的&#xff0c;显示菜单&#xff08;menu&#xff09;的持续时间。100

方法

该方法继承自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是分割按钮&#xff08;splitbutton&#xff09;增加的或重写的方法。

名称参数描述
optionsnone返回选项&#xff08;options&#xff09;对象。
disablenone禁用分割按钮&#xff08;splitbutton&#xff09;。代码实例&#xff1a;
  1. $(&#39;#sb&#39;).splitbutton(&#39;disable&#39;);
enablenone启用分割按钮&#xff08;splitbutton&#xff09;。代码实例&#xff1a;
  1. $(&#39;#sb&#39;).splitbutton(&#39;enable&#39;);
destroynone销毁分割按钮&#xff08;splitbutton&#xff09;。

转:https://www.cnblogs.com/jiangxiaobo/p/7115494.html



推荐阅读
  • HTML 页面中调用 JavaScript 函数生成随机数值并自动展示
    在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 深入剖析Java中SimpleDateFormat在多线程环境下的潜在风险与解决方案
    深入剖析Java中SimpleDateFormat在多线程环境下的潜在风险与解决方案 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 在使用SSH框架进行项目开发时,经常会遇到一些常见的问题。例如,在Spring配置文件中配置AOP事务声明后,进行单元测试时可能会出现“No Hibernate Session bound to thread”的错误。本文将详细探讨这一问题的原因,并提供有效的解决方案,帮助开发者顺利解决此类问题。 ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
  • ThinkPHP模板中函数调用的开发技巧与实践 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 在使用 Qt 进行 YUV420 图像渲染时,由于 Qt 本身不支持直接绘制 YUV 数据,因此需要借助 QOpenGLWidget 和 OpenGL 技术来实现。通过继承 QOpenGLWidget 类并重写其绘图方法,可以利用 GPU 的高效渲染能力,实现高质量的 YUV420 图像显示。此外,这种方法还能显著提高图像处理的性能和流畅性。 ... [详细]
  • 本文深入解析了 jQuery 中用于扩展功能的三个关键方法:`$.extend()`、`$.fn` 和 `$.fn.extend()`。其中,`$.extend()` 用于扩展 jQuery 对象本身,而 `$.fn.extend()` 则用于扩展 jQuery 的原型对象,使自定义方法能够作为 jQuery 实例的方法使用。通过这些方法,开发者可以轻松地创建和集成自定义插件,增强 jQuery 的功能。文章详细介绍了每个方法的用法、参数及实际应用场景,帮助读者更好地理解和运用这些强大的工具。 ... [详细]
  • 本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]
  • 本文全面解析了JavaScript中的DOM操作,并提供了详细的实践指南。DOM节点(Node)通常代表一个标签、文本或HTML属性,每个节点都具有一个nodeType属性,用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作,结合实际案例,帮助读者更好地理解和掌握DOM编程技术。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
author-avatar
手机用户2602938483
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有