跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

来源：网络收集时间：2026-09-05

导读：跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例杨教授工作室精心创作的优秀程序员职业提升必读系列资料目录 1.1EaseUI菜单Menu组件及应用实例 (2) 1.1.1菜单（Menu）定义在一些DIV 标记中 (2) 1.2超链接按钮（easyui-linkbutton）组件 (4)

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1.1EaseUI菜单Menu组件及应用实例 (2)

1.1.1菜单（Menu）定义在一些DIV 标记中 (2)

1.2超链接按钮（easyui-linkbutton）组件 (4)

1.2.1easyui-linkbutton组件 (4)

1.3菜单按钮（Menu Button）组件 (5)

1.3.1菜单按钮的组成 (5)

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1.1EaseUI菜单Menu组件及应用实例

1.1.1菜单（Menu）定义在一些 DIV 标记中

菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton 和splitbutton。它还可以用于导航和执行命令。

1、通过标签创建菜单

给<div/>标签（该标签为菜单项目的容器）添加一个名为'easyui-menu'的类ID。每个菜单项都通过<div/>标签创建（不需要再添加<a>标签）。可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类ID菜单项将会生成一个菜单分割线。（1）HTML标签

<div>

<div id="excelItemID">Excel</div>

<div id="powerPointItemID">PowerPoint</div>

</div>

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

</div>

（2）显示菜单

在菜单被创建的时候它是隐藏和不可见的。调用'show'方法显示菜单或者调用'hide' 方法隐藏它。

$(function(){

$('#menuWarpDivTagID').menu('show', {

left: 200,

top: 100

});

$('#menuWarpDivTagID').menu({

onClick:function(item){

alert("点击的菜单项目id="+item.id+"，文字=" + item.text);

}

});

</script>

（3）监听'onClick'事件

（4）示例程序的执行结果

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1.2超链接按钮（easyui-linkbutton）组件

1.2.1easyui-linkbutton组件

1、主要的特性

通常情况下，使用<button> 元素来创建按钮，而链接按钮（Link Button）则是使用<a> 元素来创建的。所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的<a> 元素。

2、应用的要求

应用<a>创建出导航按钮，但不能再通过在<a>中设置href属性定义URL，而必须在onclick事件中进行功能操作——通过设置window.location.href。

链接按钮用户创建超链接按钮。它是表示正常的<a>标记。可以显示图标和文字,或仅仅只是图标或文字。按钮的宽度可以动态收缩/展开以适应文本标签。

3、使用方式——linkbutton同样提供两种使用方式

为了创建链接按钮（Link Button），所有您需要做的就是添加一个名为'easyui-linkbutton' 的class 属性到<a> 元素。

（1）通过html标记创建

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

其中的iconCls 属性是一个icon 的CSS class 样式，它在按钮上显示一个icon 图片。（2）通过js脚本创建

<a id="btn" href="#">easyui</a>

$('#btn').linkbutton({ iconCls: 'icon-search' });

以上两种方式都可以创建linkbutton。

4、以下例子使用JQuery绑定单击处理函数给链接

<body>

<a id="btn" href="" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

$(function () {

$('#btn').bind('click', function () {

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

alert('按钮被点击了');

});

</script>

</body>

5、禁止按钮

有时候您需要禁用链接按钮（Link Button）或者启用它，下面的代码演示了如何禁用一个链接按钮（Link Button），而只需要调用'disable' 方法。

$(selector).linkbutton('disable');

1.3菜单按钮（Menu Button）组件

1.3.1菜单按钮的组成

1、菜单按钮（Menu Button）包含一个按钮（button）和一个菜单（menu）组件，当点击或移动鼠标到按钮上，将显示一个对应的菜单。

为了定义一个菜单按钮（Menu Button），应该要定义一个链接按钮（Link Button）和一个菜单（menu）。上图中的“Edit”为链接按钮，当点击该链接按钮（它为弹出菜单的触发按钮）时，将弹出下拉菜单项目。

2、对应的HTML标签示例

<a href="#" class="easyui-menubutton" menu="#mm1"

iconCls="icon-edit">Edit</a>

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

</div>

<div …… 此处隐藏：1501字，全部文档内容请下载后查看。喜欢就下载吧 ……

跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/91142.html（转载请注明文章来源）

上一篇：车间级安全培训教育试题
下一篇：《集成电路版图LAYOUT设计与Cadence》讲义