jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮


Posted in Javascript onNovember 18, 2015

jQuery 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
 });

创建链接按钮(Link Button)

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

jQuery 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
Javascript 相关文章推荐
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
JavaScript严格模式详解
Nov 18 #Javascript
每天一篇javascript学习小结(String对象)
Nov 18 #Javascript
You might like
几个php应用技巧
2008/03/27 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js 对象是否存在判断
2009/07/15 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
PyQT实现多窗口切换
2018/04/20 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python把一个字符串切开的实例方法
2020/09/27 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
UNIX文件系统常用命令
2012/05/25 面试题
大学生应聘自荐信
2013/10/11 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
党员组织关系介绍信
2014/02/13 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
人事文员岗位职责
2015/02/04 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript