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 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
webpack引入eslint配置详解
Jan 22 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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调用三种数据库的方法(2)
2006/10/09 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python input函数使用实例解析
2019/11/22 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
合作协议书
2014/04/23 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2014年接待工作总结
2014/11/26 职场文书
跳高加油稿
2015/07/21 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers