jQuery EasyUI 菜单与按钮 – 创建简单的菜单

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

jQuery EasyUI 菜单与按钮 – 创建链接按钮

jQuery EasyUI 菜单与按钮 - 创建链接按钮(Link Button)

一般情况下,按钮通过使用<button>元素来创建,而<a>元素可以创建一个链接,因此一个链接按钮(Link Button)可以当作一个显示为按钮样式的<a>元素。

为了创建链接按钮(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

jQuery EasyUI 菜单与按钮 – 创建菜单按钮

pre { white-space: pre-wrap; }

jQuery EasyUI 菜单与按钮 - 创建菜单按钮(Menu Button)

本节介绍了如何创建菜单按钮。

菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单。

为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu),下面是一个实例:

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
<a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div iconCls="icon-undo">Undo</div>
<div iconCls="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div iconCls="icon-remove">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>

现在已经定义好了一个菜单按钮(Menu Button),您不需要写任何的javascript代码。

jQuery EasyUI 菜单与按钮 – 创建分割按钮

jQuery EasyUI 菜单与按钮 - 创建分割按钮(Split Button)

本节中的实例将演示如何创建和使用分割按钮(Split Button)。

SpliButton组件依赖于Menu(菜单)组件和LinkButton(链接按钮)组件。当用户点击或者鼠标悬停在向下箭头区域,将会显示一个对应的菜单。

我们创建一个分割按钮(Split Button)和一个链接按钮(Link Button):

<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
<a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
<div iconCls="icon-undo">Undo</div>
<div iconCls="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Open</span>
<div style="width:150px;">
<div>Firefox</div>
<div>Internet Explorer</div>
<div class="menu-sep"></div>
<div>Select Program...</div>
</div>
</div>
<div iconCls="icon-remove">Delete</div>
<div>Select All</div>
</div>

现在已经定义好了一个分割按钮(Split Button),您不需要写任何的javascript代码。

jEasyUI 菜单与按钮的更多相关文章

  1. 基于 SailingEase WinForm Framework 开发客户端程序(3:实现菜单/工具栏按钮的解耦及状态控制)

    本系列文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以  SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...

  2. Bootstrap页面布局15 - BS带下拉菜单的按钮

    带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...

  3. 关于Eclipse插件开发(四)-------给视图加下拉菜单和按钮和加入编辑器.

    本例将给视图加入下拉菜单和按钮,同时再为列表添加一个右键菜单. 创建ActionGroup类 加入菜单和按钮的方法与SWT和JFace组件的一样,先创建一个ActionGroup代码如下: MyAct ...

  4. JavaEE权限管理系统的搭建(六)--------使用拦截器实现菜单URL的跳转权限验证和页面的三级菜单权限按钮显示

    本小结讲解,点击菜单进行页面跳转,看下图,点击管理员列表后会被认证拦截器首先拦截,验证用户是否登录,如果登录就放行,紧接着会被权限验证拦截器再次拦截,拦截的时候,会根据URL地址上找到对应的方法,然后 ...

  5. EasyUI学习之menu and button(菜单和按钮)

    前言 今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服.加之立即要放假了了,感觉自己全然坐不住呢(节前综合症么).只是学习还是的继续的. 原定计划这篇文章本来应该是关于search ...

  6. bootstrap基础学习【菜单、按钮、导航】(四)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. WPF权限控制——【2】模块、菜单、按钮

    周末没有工作,没有写博客,因为觉得休息很必要:曾听到一句话是这样说的:"你们得救在乎归回安息:你们得力在乎平静安稳".当我想到太阳没秒钟要燃烧420万吨的燃料时,想到的就是造物主的 ...

  8. bootstrap学习笔记<九>(菜单,按钮。导航基本元素)

    有了bootstrap作导航不再麻烦,几个样式,几个标签就能轻松搞定. 下面就来分解学习导航条的制作. 一.首先是下拉菜单 <div class="dropdown"> ...

  9. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

随机推荐

  1. Build Telemetry for Distributed Services之Elastic APM

    官网地址:https://www.elastic.co/guide/en/apm/get-started/current/index.html Overview Elastic APM is an a ...

  2. sqlmap注入工具----一次简单的注入(实战)

    最近在学习网络安全,挖洞避免不了要使用许多工具,使用著名注入工具sqlmap的时候,对于英语不怎么好的我就比较难受了,本来就不会使用,加之又是英语的,简直难受.上网找了好多详细教程,但是命令实在是太多 ...

  3. delphi7 treeview + 数据库 实现动态节点维护

    首先说下树节点对应的表的基本结构,必需要有的字段(节点编号,父节点编号,节点名称),其他字段根据你开发的需要添加从添加节点开始,一开始就取出表中最大节点编号,每次添加节点的时候,该节点编号增加1;添加 ...

  4. Excel导入工具类

    项目需要从Excel导入数据,然后插入到数据库对应表中.设计了一个导入工具类,导入数据和导入结果如下图示: poi jar版本采用的3.15 导入工具类实现如下: package com.alphaj ...

  5. 游戏数值——LOL篇 以LOL为起点-说游戏数值设计核心思路

      附     文   文档在今年三月份我动笔写了一小部分,但当时思路凌乱,行文梗阻,于是丢在一边构思了半年,现在又回过头来慢慢写,希望能写好写完吧,初衷是希望即时萌新也能看懂,但是好像并不能行——本 ...

  6. vs 扩展和更新下载的插件在什么位置呢,看看吧,哈哈

    C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\10.0\Extensions,注意哈,这个AppData是隐藏的哟,要显示才能 ...

  7. socket编程之黏包

    原理概述 上图是我在学习python的socket编程中遇到的黏包问题所画,以实例来说明这个高大上的黏包问题. 我们知道socket()实例中sendall()方法是无论数据有多大,一次性提交写入缓冲 ...

  8. idea-配置文件提示红色

    Idea建立spring配置文件首行红色 提示URI is not registered 复制出现红色字体的路径...File -  Settings  - schemas and DtDs 点击加号 ...

  9. 微信小程序的场景值scene

    根据微信小程序返回给我们的场景值,我们可以根据不同的场景做出不同的处理,更加方便我们对使用场景的划分 当前支持的场景值有: :发现栏小程序主入口,“最近使用”列表(基础库2..4版本起将包含“我的小程 ...

  10. windows下exfat无法写入怎么修复?

    为了能够实现mac与windows文件共享,把移动硬盘格式化为exfat了,可是在osx中放入文件后,在windows上紧进行读取写入时出现错误,提示使用chkdsk进行修正,下面是修正步骤. 方法/ ...