以上篇博客为基础,增加选项卡部分注意细节
页面更新
index.jsp更新
圈中部分为更新部分,及选项卡
新增页面
addBook.jsp(新增)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>新增界面</title>
</head>
<body>
新增界面
</body>
</html>
listBook1.jsp(未上架)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>未上架</title>
</head>
<body>
未上架
</body>
</html>
js及dao类更新
index.js
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
onClick: function(node){
// alert(node.text);// 在用户点击的时候提示
// debugger;
//解决重复打开页面
if($('#tab').tabs('exists',node.text)){
$('#tab').tabs('select',node.text);
}else{
var src=node.attributes.self.url;
//解决非页子节点打开页面的问题
if(src){
var content='<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#tab').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
}
});
})
dao
红线是之前木有的,不加到集合开不了选项卡;
运行显示
没有重复打开选项卡,也没有打开父节点页面,注意看js代码;