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学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
vue实现pdf文档在线预览功能
2019/11/26 Javascript
python用户评论标签匹配的解决方法
2018/05/31 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python3 pygame实现接小球游戏
2019/05/14 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
歌唱比赛主持词
2014/03/18 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
酒店前台岗位职责
2015/04/16 职场文书
大学开学感言
2015/08/01 职场文书
防震减灾主题班会
2015/08/14 职场文书
护理自荐信
2019/05/14 职场文书
手残删除python之后的补救方法
2021/06/26 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android