这是学习 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;">©沉山工作室版权所有,维权所有必究</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>