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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
jquery 图片轮换效果
Jul 29 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
javascript实现左右缓动动画函数
Nov 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 简单日历实现代码
2009/10/28 PHP
php内嵌函数用法实例
2015/03/20 PHP
php实现插入排序
2015/03/29 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
PHP 8新特性简介
2020/08/18 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
岗位职责的定义
2013/11/10 职场文书
建筑设计师岗位职责
2013/11/18 职场文书
总经理助理职责
2014/02/04 职场文书
工作说明书范文
2014/05/07 职场文书
冰雪公主观后感
2015/06/16 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript