轻松学习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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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&amp;mysql(二)
2006/10/09 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
查找iframe里元素的方法可传参
2013/09/11 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python实现的快速排序算法详解
2017/08/01 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
精细化工应届生求职信
2013/11/17 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
实习介绍信范文
2015/05/05 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python