tabs控件
tree控件


部分代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 引入公共包含页面 -->
<%@ include file="common/head.jsp"%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
/* 加载数的数据 */
$('#myTree').tree({
url : cp + '/data/tree_data1.json', //请求地址
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',{
title:node.text, //标题
content:node.text, //内容
closable:true, //是否可以关闭
iconCls:node.iconCls, //图标
});
}else{//存在就让其对应选中
var f = $('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true"
style="height: 85px; text-align: center;">
<h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',split:true"
style="height: 68px; text-align: center">
<h4>©沉山工作室版权所有,违权必究</h4>
</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;">
<!-- 中间的tabs控件 -->
<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
<!-- padding 内间距 -->
<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding: 10px; display: none">
<img src="images/1.jpg" style="width: 100%; height: 100%">
</div>
</div>
</div>
</body>
</html>
核心代码
<script type="text/javascript">
$(function() {
/* 加载数的数据 */
$('#myTree').tree({
url : cp + '/data/tree_data1.json', //请求地址
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',{
title:node.text, //标题
content:node.text, //内容
closable:true, //是否可以关闭
iconCls:node.iconCls, //图标
});
}else{//存在就让其对应选中
var f = $('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>