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

更新时间：2023-08-30 15:15:02 阅读量：教育文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

跟我学英语推荐度：
相关推荐

跟我学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="http://www.77cn.com.cn" 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>Paste</div>

<div iconCls="icon-remove">Delete</div>

<div>Select All</div>

</div>

<div>Update</div>

<div>About</div>

</div>

本文来源：https://www.bwwdw.com/article/ilti.html

相关文章：

上一篇：车间级安全培训教育试题下一篇：2018-2019年初中语文湖南中考精选试题【7】含答案考点及解析