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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
基于Require.js使用方法(总结)
2017/10/26 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
授权委托书格式
2014/07/31 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
幸福终点站观后感
2015/06/04 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android