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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
关于js datetime的那点事
Nov 15 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
js运动应用实例解析
Dec 28 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
深入浅析vue中cross-env的使用
Sep 12 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
Python利用IPython提高开发效率
2016/08/10 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
如何利用find命令查找文件
2016/11/18 面试题
运动会入场词100字
2014/02/06 职场文书
美术指导求职信
2014/03/17 职场文书
大学生十八大感想
2015/08/11 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书