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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
element-ui的回调函数Events的用法详解
Oct 16 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
PHP数字格式化
2006/12/06 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php四种基础算法代码实例
2013/10/29 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python更换外网IP的方法
2018/07/09 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
中学生打架检讨书
2014/10/13 职场文书
滞留工资返还协议书
2014/10/19 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Redis如何实现分布式锁
2021/08/23 Redis
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技