文档章节

EasyUI学习笔记5:来点甜点_ menu和theme插件

ooad
 ooad
发布于 2015/03/25 10:25
字数 1877
阅读 227
收藏 1
点赞 0
评论 0

一、引言

终于坚持写到5了,接下来来点无关痛痒的,觉得没必要可直接跳过。一个系统可能会打开非常多tab页,如果一个一个点小叉叉会比较麻烦,如何一次性关闭?Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单,我们只需要编写菜单项的内容,并对菜单项容器设置相应的 Class 类 easyui-menu,即可实现一个漂亮的右键快捷菜单。

Easyui默认提供了5种主题风格的皮肤,接下来要实现一个简单的换肤风格。

二、右键菜单关闭tab

首先需要页面<body></body>中添加了一个右键菜单,代码位置任意。代码如下:

<div id="tabsMenu" style="width:150px;">
         <div data-options="name:'close'">关闭</div>
         <div></div>
         <div data-options="name:'closeall'">全部关闭</div>
         <div data-options="name:'closeother'">除此之外全部关闭</div>
</div>

该菜单指定一个id为tabsMenu。一共有 3个菜单项,分别命名为close,closeall,closeother。另外还有1个 class 属性为 menu-sep 的 DIV是分隔符,可以将这些菜单项从视觉上分为2组。


为了实现操作,有两个问题需要解决。首先是要实现tab与该右键菜单的绑定,即关闭选定tab页;其次是要处理点击事件。

1.绑定tabs的右键菜单

从http://www.jeasyui.net/查看tabs插件API我们可以看到它有个onContextMenu事件,该事件在标签页面板被右键点击时触发。它有3个可选参数为e,titile,index。e是javascript内定对象全称event,event代表事件的状态。参考例子代码如下:

/*绑定tabs的右键菜单*/
$("#tabs").tabs({
     onContextMenu : function (e, title) {
             e.preventDefault();
             $('#tabsMenu').menu('show', {
                     left : e.pageX,
                     top : e.pageY
              }).data("tabTitle", title);
     }
});

其中,e.preventDefault()取消事件默认动作。Easyui-menu插件的show方法是在指定的位置显示菜单(menu),参数是left和top位置。e.pageX则代表鼠标的当前位置。data() 方法向被选元素附加数据,或者从被选元素获取数据。该方法是取tab标签页的名称。

2. 处理菜单点击事件

从http://www.jeasyui.net/查看menu的点击事件为onClick(item),item代表菜单项。注意#tabsMenu应与页面右键菜单id相同。代码如下:

/*实例化menu的onClick事件*/
$("#tabsMenu").menu({
     onClick : function (item) {
         CloseTab(this, item.name);
     }
});

接下来就是对关闭tab页的方法进行编写处理代码了,总共3个菜单项,用了if,当然也可以用switch case。代码如下:

/*右键菜单关闭事件的处理*/
function CloseTab(curTab, itemName) {
	//选中的tab的title
	var curTabTitle = $(curTab).data("tabTitle");
	//所有tab
	var allTabs = $("#tabs").tabs("tabs");
	//所有tab的title的数组
	var allTabsTitle = [];
	//关闭菜单
	if (itemName === "close") {
		$("#tabs").tabs("close", curTabTitle);
		return;
	}		
	//遍历所有tab
	$.each(allTabs, function () {
	var optTab = $(this).panel("options");
	//关闭其他条件:(1)tab可关闭;(2)选中的不关闭;(3)菜单名为closeother
	if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
		//往tab的title数组中添加title
		allTabsTitle.push(optTab.title);
	//关闭所有
	} else if (optTab.closable && itemName === "closeall") {
		allTabsTitle.push(optTab.title);
	}
	});	
			//for循环逐个关闭
	for (var i = 0; i < allTabsTitle.length; i++) {
	$("#tabs").tabs("close", allTabsTitle[i]);
	}
}

代码有点长,但都写了注释,相信应该是能够看明白的。

三、更改皮肤theme

Easyui默认提供5种皮肤主题,可在下载的easyui1.3.5—themes可以看到,分别为

Default浅蓝色/Black 黑色/gray灰色/metro风格/bootstrap风格。

为了实现换肤,同样首先需要在页面写操作菜单,位置呢我放在了north的右侧,代码如下:

<div id="head" data-options="region:'north'" style="height:60px;">
	<div style="height:30px;font-size:30px">MISP</div>
	<div style="text-align: right;">
	<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
	</div>
	<div id="theme" style="width: 100px; display: none;">
		<div onclick="changeTheme('default');">浅蓝</div>
		<div onclick="changeTheme('gray');">灰色</div>
		<div onclick="changeTheme('black');">黑色</div>
		<div onclick="changeTheme('metro');">Metro</div>
		<div onclick="changeTheme('bootstrap');">Bootstrap</div>
	</div>
</div>

上述代码中有一个自定义的切换主题方法changeTheme(title)。

接下来就是js代码实现该方法,直接上吧:

/*切换主题*/
changeTheme=function (themeName) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
    $easyuiTheme.attr('href', href);
    var $iframe = $('iframe');
    if ($iframe.length > 0) {
    for (var i = 0; i < $iframe.length; i++) {
          var ifr = $iframe[i];
          $(ifr).contents().find('#easyuiTheme').attr('href', href);
     }
}

代码从网上扒的,算是简洁的了。如果要人性化,还应该使用cookie来保存用户的选择。但考虑到本节内容纯属甜点,就不弄得太复杂,也懒得解释。

运行tomcat,在浏览器中输入localhost:8080/easyui/index.html。界面如下:


收拾心情,准备迎接正餐datagrid!

最后附上完整index.html代码:

<html>
<head>
	<meta charset="UTF-8">
	<title>easyui学习笔记</title>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(function () {
		/*树形菜单点击处理*/
		$("#tree").tree({
			url : 'treeData.json',
			lines : true,
			onClick : function (node) {
				if (node.attributes) {
					openTab(node.text, node.attributes.url);
				}
			}
		});
		/*在右边center区域打开菜单,新增tab*/
		function openTab(title, url) {
			//判断是否已存在
			if ($("#tabs").tabs('exists', title)) {  
				$('#tabs').tabs('select', title);
			} else {
				//新增tab
				$('#tabs').tabs('add', {
					title : title,
					closable : true,
					content : createTabContent(url)
				});
			}
		}
	
		/* 生成tab内容 */
		function createTabContent(url){
			return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
		}

		/*绑定tabs的右键菜单*/
		$("#tabs").tabs({
			onContextMenu : function (e, title) {
				e.preventDefault();
				$('#tabsMenu').menu('show', {
					left : e.pageX,
					top : e.pageY
				}).data("tabTitle", title);
			}
		});
		
		/*实例化menu的onClick事件*/
		$("#tabsMenu").menu({
				onClick : function (item) {
				CloseTab(this, item.name);
			}
		});
		
		/*右键菜单关闭事件的处理*/
		function CloseTab(curTab, itemName) {
			//选中的tab的title
			var curTabTitle = $(curTab).data("tabTitle");
			//所有tab
			var allTabs = $("#tabs").tabs("tabs");
			//所有tab的title的数组
			var allTabsTitle = [];
			//关闭菜单
			if (itemName === "close") {
				$("#tabs").tabs("close", curTabTitle);
				return;
			}		
			//遍历所有tab
			$.each(allTabs, function () {
				var optTab = $(this).panel("options");
				//关闭其他条件:(1)tab可关闭;(2)选中的不关闭;(3)菜单名为closeother
				if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
					//往tab的title数组中添加title
					allTabsTitle.push(optTab.title);
				//关闭所有
				} else if (optTab.closable && itemName === "closeall") {
					allTabsTitle.push(optTab.title);
				}
			});	
			//for循环逐个关闭
			for (var i = 0; i < allTabsTitle.length; i++) {
				$("#tabs").tabs("close", allTabsTitle[i]);
			}
		}
		/*切换主题*/
		changeTheme=function (themeName) {
            var $easyuiTheme = $('#easyuiTheme');
            var url = $easyuiTheme.attr('href');
            var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
            $easyuiTheme.attr('href', href);
            var $iframe = $('iframe');
            if ($iframe.length > 0) {
                for (var i = 0; i < $iframe.length; i++) {
                    var ifr = $iframe[i];
                    $(ifr).contents().find('#easyuiTheme').attr('href', href);
                }
            }
        };	
});
</script>
</head>
<body class="easyui-layout">
	<div id="head" data-options="region:'north'" style="height:60px;">
		<div style="height:30px;font-size:30px">MISP</div>
		<div style="text-align: right;">
			<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
		</div>
		<div id="theme" style="width: 100px; display: none;">
			<div onclick="changeTheme('default');">浅蓝</div>
			<div onclick="changeTheme('gray');">灰色</div>
			<div onclick="changeTheme('black');">黑色</div>
			<div onclick="changeTheme('metro');">Metro</div>
			<div onclick="changeTheme('bootstrap');">Bootstrap</div>
		</div>
	</div>
	<div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div>
	<div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航">
			<div id="navMenu" class="easyui-accordion" data-options="fit:true,border:false">
				<div title="系统管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
				</div>
				<div title="基础数据" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
				<ul id="tree" class="easyui-tree" data-options="lines:true"></ul>	
				</div>    
			</div>
	</div>
	<div id="mainPanle" data-options="region:'center'">
	    <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
	        <div title="About" data-options="iconCls:'icon-tip'">
	            <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
	        </div>
	    </div>    
	</div>
	<div id="tabsMenu" class="easyui-menu" style="width:150px;">
		<div data-options="name:'close'">关闭</div>
		<div class="menu-sep"></div>
		<div data-options="name:'closeall'">全部关闭</div>
		<div data-options="name:'closeother'">除此之外全部关闭</div>
	</div>
</body>
</html>



© 著作权归作者所有

共有 人打赏支持
ooad
粉丝 93
博文 23
码字总数 17510
作品 0
广州
第七节 - 部门管理模块(画一个datagrid表格)

在easyui中,datagrid组件需要用一个table标签去渲染。 PS: 在easyui的表格组件中,我们唯一要关心的就是 1.提交到什么地址: url 2.显示哪些字段。 比如,ID字段,你需要在th中设置一个fie...

剽悍一小兔 ⋅ 05/11 ⋅ 0

jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS ⋅ 05/22 ⋅ 0

第六节 - 部门管理模块(开始)

sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如sublime,dreamweaver。 2.引入easyu...

剽悍一小兔 ⋅ 05/11 ⋅ 0

EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

【php增删改查实例】第十四节 - 用户管理模块(起步)

从这一节开始,开始着手开发部门管理模块。 之后的内容就在此基础上进行增加。 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块。 打开这个文件,新建一个userManage.html文...

剽悍一小兔 ⋅ 06/01 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg ⋅ 05/31 ⋅ 0

你这个easyui 列回显的问题最后解决了吗,求教

@小波刘 你好,想跟你请教个问题:https://www.oschina.net/question/10202142142095你这个easyui 列回显的问题最后解决了吗,求教

营养快线送你520 ⋅ 05/09 ⋅ 0

基于easyui的文档管理系统springmvc+mybaits实现

开发背景 最近需要开发一个后台项目,想来想去决定使用easyui来做页面处理,于是就先自己做了一个练手的文件管理后台。 2. 架构 架构方面才用srpingmvc+mybaits+maven方式,页面用jsp,数据库...

无小农 ⋅ 06/11 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 23分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 26分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 36分钟前 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 38分钟前 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 56分钟前 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部