EasyUi02

最新推荐文章于 2024-07-16 22:31:12 发布

黩817

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量157

点赞数

分类专栏：前端 java 文章标签： easyui javascript jquery

本文链接：https://blog.csdn.net/weixin_66939060/article/details/124608116

版权

java 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

1.Tree控件的使用

2.tabs控件的使用

1.Tree控件的使用

Tree顾名思义就是树形菜单

例图

2.tabs控件(即选项卡)

选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。

例图：

今天我们就要利用这两个控件来合并完成树的点击弹出tabs效果

Tree的使用

1.首先在之前下载EasyUi的文件夹中找到tree_data1.json

导入到eclipse

在eclipse中新建一个data数据提供包

目标：

1.点击树形菜单弹出选项卡

2.有子节点的需要展开而不是弹出选项卡

3.点击相同的需要判断不重复

4.点击树形菜单判断选项卡中是否已存在,(已存在弹到选项卡中,反之新建)

根据EasyUi中文文档中提供的方法我们开始码代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据
		$("#myTree").tree({
			url : ctx + '/data/tree_data1.json',//请求地址 servlet
			animate : true,//展开/收缩让节点显示动画效果
			onDblClick : function(node) {//双击节点
				//alert(node.text + " " + node.id + " " + node.state);//在用户点击的时候提示
				//判断是否是子节点
				var nodes = $('#myTree').tree('getChildren',node.target);
				
				if(nodes.length==0){//说明是子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists',node.text);    
					if(!f){//说明不存在
						//新增一个选项卡
						$('#myTab').tabs('add', { //iconCls:'icon-mini-refresh',   
							title : node.text, //标题
							content : node.text, //内容
							closable : true, //是否可以关闭
							iconCls:node.iconCls//图标
						});		
					}else{//
						$('#myTab').tabs('select',node.text);    
					}
				}
				
			
			}
		});
	})
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',title:'North Title',split:true"
		style="height: 100px; text-align: center">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south'" style="height: 100px;">
		<h4>&copy;没有优点工作室,维权使用必究</h4>
	</div>
	<div
		data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
		style="width: 100px;"></div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 100px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">

		</ul>

	</div>
	<div data-options="region:'center',"
		style="padding: 5px; background: #eee;">
		<!-- 中间的tabs控件 -->
		<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-application-home'" title="首页" style="padding: 10px; display: none;">
				<img src="image/lb1.png" style="width: 100%; height: 100%" />
			</div>

		</div>
	</div>
</body>
</html>

即可实现我们的所有目标

如下：

好的我们下期再见！！！

黩817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUi02

目录1.Tree控件的使用2.tabs控件的使用1.Tree控件的使用Tree顾名思义就是树形菜单例图2.tabs控件(即选项卡)选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。例图：今天我们就要利用这两个控件来合并完成树的点击弹出tabs效果Tree的使用1.首先在之前下载EasyUi的文件夹中找到tree_data1.jso.
复制链接

扫一扫

专栏目录