轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮


Posted in Javascript onNovember 30, 2015

一、EasyUI创建简单的菜单

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

菜单(Menu)定义在一些 DIV 标记中,如下所示:

<div id="mm" class="easyui-menu" style="width:120px;">
 <div onclick="javascript:alert('new')">New</div>
 <div>
 <span>Open</span>
 <div style="width:150px;">
 <div><b>Word</b></div>
 <div>Excel</div>
 <div>PowerPoint</div>
 </div>
 </div>
 <div icon="icon-save">Save</div>
 <div class="menu-sep"></div>
 <div>Exit</div>
</div>

当菜单创建之后是不显示的,调用 'show' 方法显示它或者调用 'hide' 方法隐藏它:

$('#mm').menu('show', {
 left: 200,
 top: 100
});

二、EasyUI创建按钮
1、EasyUI创建链接按钮(Link Button)
通常情况下,使用<button> 元素来创建按钮,而链接按钮(Link Button)则是使用 <a> 元素来创建的。所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的<a> 元素。

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

为了创建链接按钮(Link Button),所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到<a> 元素:

<div style="padding:5px;background:#fafafa;width:500px;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>
 
<div style="padding:5px;background:#fafafa;width:500px;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>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

正如您所看到的,iconCls 属性是一个 icon 的 CSS class 样式,它在按钮上显示一个 icon 图片。
有时候您需要禁用链接按钮(Link Button)或者启用它,下面的代码演示了如何禁用一个链接按钮(Link Button):
$(selector).linkbutton('disable'); // call the 'disable' method
2、EasyUI创建菜单按钮(Menu Button)
菜单按钮(Menu Button)
包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单。

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu),下面是一个实例:

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
 <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div 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 iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
 <div>Help</div>
 <div>Update</div>
 <div>About</div>
</div>

现在已经定义好了一个菜单按钮(Menu Button),您不需要写任何的 javascript 代码。
3、EasyUI 创建分割按钮(Split Button)

分割按钮(Split Button)包含一个链接按钮(Link Button)和一个菜单(Menu)。当用户点击或者鼠标悬停在向下箭头区域,将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮(Split Button)。

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

我们创建一个分割按钮(Split Button)和一个链接按钮(Link Button):

<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
 <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div 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>
 <span>Open</span>
 <div style="width:150px;">
 <div>Firefox</div>
 <div>Internet Explorer</div>
 <div class="menu-sep"></div>
 <div>Select Program...</div>
 </div>
 </div>
 <div iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>

现在已经定义好了一个分割按钮(Split Button),您不需要写任何的 javascript 代码。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
vue实现在线学生录入系统
May 30 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 #Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
javascript编程异常处理实例小结
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 #Javascript
You might like
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python缩进和冒号详解
2016/06/01 Python
机器学习python实战之决策树
2017/11/01 Python
django 单表操作实例详解
2019/07/30 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
什么是数组名
2012/05/10 面试题
财务管理专业推荐信
2013/11/19 职场文书
自我评价范文点评
2013/12/04 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers