分享一下今天打的一部分代码:
今天用到了tree,tabs以及图标
效果图:
源代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="Conut/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 页面载入函数 */
$(function(){
$('#mytree').tree({
url:path+'/data/tree_data1.json', //数据请求地址
animate:true,//展开和收回动画效果
onDblClick: function(node){//节点 == 对象
//判断是否是子节点
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, //是否可以关闭
});
}else{//存在就让其选中
$('#mytab').tabs('select',node.text);
}
}
}
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:90px;text-align:center">
<h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
沉山工作室
</div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:200px;">
<ul id="mytree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'," style="padding:5px;background:#fff;">
<div id="mytab" class="easyui-tabs" style="width:100%;height:100%;">
<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding:20px;display:none;">
</div>
</div>
</div>
</body>
</html>