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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
微信小程序使用GoEasy实现websocket实时通讯
May 19 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php发送邮件的问题详解
2015/06/22 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python关闭windows进程的方法
2015/04/18 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python如何实现反向迭代
2018/03/20 Python
python中update的基本使用方法详解
2019/07/17 Python
python高级特性简介
2020/08/13 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
中餐厅主管的职责范文
2014/02/04 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
2014年国培研修感言
2014/03/09 职场文书
大学生评语大全
2014/04/18 职场文书
爱与责任演讲稿
2014/05/20 职场文书
借款民事起诉状范文
2015/05/19 职场文书
工资证明范本
2015/06/12 职场文书
圣诞晚会主持词
2015/07/01 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Redis如何实现分布式锁
2021/08/23 Redis