Easyui02

最新推荐文章于 2024-05-15 20:43:52 发布

不想余生

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量180

点赞数

分类专栏：笔记文章标签： javascript easyui 开发语言

本文链接：https://blog.csdn.net/weixin_63692854/article/details/124599899

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

这是学习 Easyui的第二天，使用tree控件&tabs控件&图标 iconCls:'icon-mini-refresh'

在之前的基础上完善了后台管理界面。。。。。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据 ajax
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json',//请求地址servlet
			animate : true,//让节点收缩
			onDblClick : function(node) {//节点=对象
				/* alert(node.text); */// 在用户（双击）点击的时候提示
				//判断是否是子节点
				//拿到后代节点地集合
				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',split:true"
		style="height: 80px; text-align: center; background: yellow;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',title:'South Title',split:true"
		style="height: 60px; text-align: center;">&copy;沉山工作室版权所有，维权所有必究</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 150px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">
		</ul>

	</div>
	<div data-options="region:'center'" style="padding: 5px; background: #fff">
		<!-- 中间tas控件 -->
		<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding: 10px; display: none;">
				<img alt="" src="images/WIN_20220428_15_00_43_Pro.jpg"style="width: 100%; height: 100%">
			</div>
		</div>
	</div>
</body>
</html>

不想余生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Easyui02

这是学习Easyui的第二天，使用tree控件&tabs控件&图标iconCls:'icon-mini-refresh' 在之前的基础上完善了后台管理界面。。。。。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="common/head.jsp"%><!DOCTYPE ht...
复制链接

扫一扫