jQuery EasyUI菜单与按钮详解


Posted in Javascript onJuly 13, 2016

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>5、easyui 菜单与按钮</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<script>
$(function(){
$(document).bind('contextmenu',function(e){
$('#mm').menu('show', {
left : e.pageY,
top : e.pageX
});
return false;
});
});
</script>
<script>
$(function(){
$(".dsbtn").linkbutton('disable');
});
</script>
</head>
<body>
<!--开始 创建简单的菜单-->
<!--菜单默认是不显示的 需要在javascript中调用显示-->
<div id="mm" class="easyui-menu" style="width: 150px;height: 120px;">
<div>新建</div>
<div>
<span>打开</span>
<div style="width:150px;height: 120px;">
<div>Word</div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">保存</div>
<div class="menu-sep"></div>
<div>退出</div>
</div>
<!--结束 创建简单的菜单-->
<!--开始 创建链接按钮(Link Button)-->
<!--链接按钮(Link Button)实则是使用 <a> 元素来创建的。
所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的<a> 元素-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
<a href="#" class="easyui-linkbutton">text button</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
<!--加上属性plain="true"其实就是去除按钮样式如图-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
<a href="#" class="easyui-linkbutton" plain="true">text button</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
</div>
<!--如果要禁用按钮只需要执行$(selector).linkbutton('disable');-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-cancel">Cancel</a>
<a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-reload">Refresh</a>
<a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-search">Query</a>
<a href="#" class="easyui-linkbutton dsbtn">text button</a>
<a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-print">Print</a>
</div>
<!--结束 创建链接按钮(Link Button)-->
<!--开始 创建菜单按钮(Menu Button)-->
<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a> 
<a href="#" iconCls="icon-help" class="easyui-menubutton" menu="#mm2">help</a>
</div>
<div id="mm" style="width:150px;height: 180px;" menuAlign="left"> 
<div data-options="iconCls:'icon-undo'">Undo</div> 
<div data-options="iconCls:'icon-redo'">Redo</div> 
<div class="menu-sep"></div> 
<div>Cut</div> 
<div>Copy</div> 
<div>Paste</div> 
<div class="menu-sep"></div> 
<div data-options="iconCls:'icon-remove'">Delete</div> 
<div>Select All</div> 
</div> 
<div id="mm2" class="menu-bottom" style="position: absolute; width:100px;height:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
<!--结束 创建菜单按钮(Menu Button)-->
</body>
<html>

jQuery EasyUI菜单与按钮详解

问题1:右键点击按钮出现菜单,但是并没有屏蔽window自带的右键菜单,去除<!--开始 创建链接按钮(Link Button)-->之后的代码,屏蔽了window自带右键菜单,但是并没有在点击的时候的边上,而是在最顶部;

问题2:如果没有设置height属性,并不自动识别高度,如下图:

jQuery EasyUI菜单与按钮详解

问题3:如下图,菜单按钮会显示在上方,而不是显示在下方,而且也存在不设置高度的话,不会自定识别高度

jQuery EasyUI菜单与按钮详解

jQuery EasyUI菜单与按钮详解

这些问题,是easyui框架本身的bug么,还是设置属性出现问题,使用的easyui版本是1.4.5

以上所述是小编给大家介绍的jQuery EasyUI菜单与按钮详解,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 #Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 #Javascript
Bootstrap登陆注册页面开发教程
Jul 12 #Javascript
深入浅析knockout源码分析之订阅
Jul 12 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 #Javascript
JavaScript导航脚本判断当前导航
Jul 12 #Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php实现评论回复删除功能
2017/05/23 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
Js四则运算函数代码
2012/07/21 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
原生JS实现无缝轮播图片
2020/06/24 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python2与Python3的区别详解
2020/02/09 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
清洁工表扬信
2014/01/08 职场文书
安全标兵事迹材料
2014/08/17 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers