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 Sort 表格排序
Oct 31 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js实现拖拽效果
Feb 12 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
JavaScript 类的封装操作示例详解
May 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
DOM 基本方法
2009/07/18 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
iview实现图片上传功能
2020/06/29 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年人事部工作总结
2014/12/03 职场文书
导游词开场白
2015/01/31 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
2019同学聚会主持词
2019/05/06 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
使用Django实现商城验证码模块的方法
2021/06/01 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript