弹出选项卡要引入easyui插件(百度即可)。
第一步:把jqeasyui文件夹引入到Web-Root下的自定义的js文件夹中
第二步:在jsp页面配置easyui的路径还有jquery的路径
<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
第三步:写代码
<%@ 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>
<title>办公管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta name="Keywords" content="keyword1,keyword2,keyword3"/>
<meta name="Description" content="网页信息的描述" />
<meta name="Author" content="gdcct.gov.cn" />
<meta name="Copyright" content="All Rights Reserved." />
<link href="${path}/logo.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
<style type="text/css">
html, body {
width : 100%;
height : 100%;
padding : 0;
margin : 0;
overflow : hidden;
</style>
<script type="text/javascript">
$(function(){
/** 在div上面附加选项卡 */
$("#tab").tabs({//如果fit下面还有属性的话,逗号一定不能少,切记!
fit : true<span style="color:#330033;background-color: rgb(51, 51, 255);">,</span> // 填充父容器
//tabWidth : 80, // 宽度
//tabHeight: 30 // 高度
<span style="background-color: rgb(255, 0, 0);">onSelect : function(title, index){ // 当选项卡选中时
/** 让当前选项卡中的面板刷新 */
var tab = $("#tab").tabs("getSelected");
tab.panel("refresh");</span>
}
});
/** 添加面板 */
$("#tab").tabs("add", {
title : "用户信息", // 标题
content : "信息", // 内容
closable : false // 是否可以关闭
});
});
/** 添加面板的函数 */
var addTab = function(title, url){
/** 判断面板是否存在 */
var isExists = $("#tab").tabs("exists", title);
/** isExists是true就代表已经存在,那就选中 */
if (isExists){
// select
$("#tab").tabs("select", title);
}else{
$("#tab").tabs("add", {
title : title, // 标题
content : "<iframe width='100%' height='100%' src='${path}/"+ url +"' frameborder='0'></iframe>", // 内容
closable : true // 是否可以关闭
});
}
};
</script>
</head>
<body>
<div id="tab">
</div>
</body>
</html>
操作树 要引入dtree插件(百度即可)
第一步:把dtree文件夹引入到Web-Root下的自定义的js文件夹中
第二步:在jsp页面配置dtree的路径还有jquery的路径,注意,这里没有演示操作树的代码实现,只演示点击按钮刷新左侧栏操作树的功能。
<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
第三步:写代码实现功能
/** 为添加操作按钮绑定点击事件 */
$("#addModule").click(function(){
/** 显示添加操作的对话窗口 */
$("#divDialog").dialog({
title : "添加操作", // 标题
width : 385, // 宽度
height : 235, // 高度
collapsible : true, // 可伸缩
minimizable : true, // 最小化
maximizable : true, // 最大化
modal : true, // 模态窗口
<span style="background-color: rgb(255, 0, 0);">onClose : function(){ // 监听是否关闭当前窗口
/** 刷新左边的操作树 */
parent.moduleLeftFrame.location.reload();
window.location.href = "${path}/admin/identity/selectModule.jspx?pageModel.pageIndex=${pageModel.pageIndex}&parentCode=${parentCode}";
}</span>
});
$("#iframe").prop("src", "${path}/admin/identity/showAddModule.jspx?parentCode=${parentCode}").show();
});
<!-- 把div作为弹出窗口 -->
<div id="divDialog" style="overflow: hidden;">
<iframe width="100%" height="100%" style="display:none;" frameborder="0" id="iframe"></iframe>
</div>