一.思维导图
二.树 tree 的概念:
属性:
id:
text:
state:"open"/"closed"
iconCls:'icon-user-home'
children:[子节点]
数据来自json
父节点
子节点
判断其是不是子节点 getChildren .length 后代
三、选项卡 tabs
判断其是否存在 exists 存在就让其选中 select 不存在就新增一个
代码展示:
%@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>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript">
$(function() {
$('#myTree').tree({
url : ctx+'/s.do', //请求地址
//animate:true;//定义节点在展开或折叠的时候是否显示动画效果。
onDblClick : function(node) {
//alert(node.text+" "+node.id+" "+node.state); // 在用户双击的时候提示
//拿到对应树节点集合
var cs = $('#myTree').tree('getChildren',node.target);
if(cs.length==0){
//判断是否存在
var f = $('#myTab').tabs('exists',node.text);
if(!f){//说明不存在
//新打开一个选项卡tap页 iconCls
$('#myTab').tabs('add',{
title:node.text, //标题 iframe内嵌套
content:'<iframe scrolling="no" frameborder="0" width="99%" height="99%" src="'+node.url+'"></iframe>', //内容
closable:true, //是否可关闭
iconCls:node.iconCls
});
}
else{//说明存在 让其对应存在
$('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>
</head>