EasyuiAPI:菜单
一、LinkButton(按钮)
1.通过标签创建:
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
2.通过JS调用:
html代码:
<a id="btn" href="#">easyui</a>
JS代码:
$('#btn').linkbutton({
iconCls: 'icon-search'
});
二、菜单按钮
1.通过标签创建:
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="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 data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
2.通过JS调用:
html代码:
<a href="javascript:void(0)" id="mb">Edit</a>
<div id="mm" style="width:150px">
...
</div>
JS代码:
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
});
三、SplitButton(分割按钮)
1.通过标签调用:
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
2.通过JS调用:
html代码:
<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
<div id="mm" style="width:100px;">
...
</div>
JS代码:
$('#sb').splitbutton({
iconCls: 'icon-ok',
menu: '#mm'
});
四、SwitchButton(开关按钮)
1.通过标签调用:
<input class="easyui-switchbutton" checked>
<input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'">
2.通过JS调用:
html代码:
<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
<div id="mm" style="width:100px;">
...
</div>
JS代码:
<input id="sb" style="width:200px;height:30px">
<script type="text/javascript">
$(function(){
$('#sb').switchbutton({
checked: true,
onChange: function(checked){
console.log(checked);
}
})
})
</script>
EasyuiAPI:菜单的更多相关文章
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- Electron使用与学习--(基本使用与菜单操作)
对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出. 一.安装 如果你本地按照github上的 # Install the `electron` command globally ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(74)-微信公众平台开发-自定义菜单
系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...
- Android菜单项内容大全
一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...
- 张高兴的 UWP 开发笔记:汉堡菜单进阶
不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...
- ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...
- Xamarin.Android之ActionBar与菜单
一.选项卡 如今很多应用都会使用碎片以便在同一个活动中能够显示多个不同的视图.在Android 3.0 以上的版本中,我们已经可以使用ActionBar提供的Tab来实现这种效果,而不需要我们自己去实 ...
- 基于 SailingEase WinForm Framework 开发客户端程序(3:实现菜单/工具栏按钮的解耦及状态控制)
本系列文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以 SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...
- 自定义ActionBar标题与菜单中的文字样式
自定义标题文字样式 标题样式是ActionBar样式的一部分,所以要先定义ActionBar的样式 <style name="AppTheme" parent="A ...
随机推荐
- Docker - Docker基础讲义
Docker Docker - 官网 Docker - Hub GitHub - Docker Docker中文社区 虚拟化技术 硬件级虚拟化(hardware-level-virtualizatio ...
- jQuery 之玩转 checkbox
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- 前端之Photoshop切片
什么是切片 ? (Photoshop中的切片) 切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快.每个切片作为一个独立的文件传输,文件中包含切片自己的设置.颜色调板.链接.翻转效果 ...
- Java 不使用科学计数法表示数据设置
java.text.NumberFormat nf = java.text.NumberFormat.getInstance(); nf.setGroupingUsed(false); nf.form ...
- Python中is和==的区别的
在python中,is检查两个对象是否是同一个对象,而==检查他们是否相等. str1 = 'yangshl' str2 = 'yang' + 'shl' print('str1 == str2:', ...
- python3 获取阿里云ECS 实例及监控的方法
#!/usr/bin/env python3.5 # -*- coding:utf8 -*- try: import httplib except ImportError: import http.c ...
- 内存/硬盘/io关系
CPU:工人,干活的,判断以及逻辑处理 硬盘:仓库,原料,数据存储 内存:车间,工人干活的地方,车间中加工原料,当车间中没有原料了,在从仓库中取原料,对原料进行加工 内存本身有一定的存储空间,对内存 ...
- Git之”make sure you have the correct access…”
git 命令在windows下无法使用pull.fetch.push等命令,提示 “please make sure you have the correct access and the repos ...
- trove,测试,db小解析
# Copyright 2014 Tesora Inc.# All Rights Reserved.## Licensed under the Apache License, Version 2.0 ...
- 如何使用Git上传代码到GitHub
1.在Github上面创建Github仓库: 2.下载Github Shell到本地:https://desktop.github.com/ 3.打开Github Shell,输入以下命令生成秘钥来验 ...