jsp页面利用easyui做出标签页效果

最新推荐文章于 2021-04-22 21:57:11 发布

原创最新推荐文章于 2021-04-22 21:57:11 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp

jsp 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在JSP页面中利用EasyUI创建标签页效果。通过展示具体代码，讲解了如何实现点击菜单时自动加载多个页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css"/>
<script src="<%=scriptPath%>jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function loadTabPage(title,url) {
   if ($('#tabs').tabs('exists', title)) {
        $('#tabs').tabs('select', title);
        return;
    }
    url = url + "&t=" + new Date().getTime();
    /*    var tabsOptions = $('#tabs').tabs('options'); 
    console.log(tabsOptions);
     var width = tabsOptions.width;
    var height = tabsOptions.height - tabsOptions.tabHeight - 5; */
    var page = '<iframe frameborder="0" style="width:100%;height:700px;" scrolling="auto" src="' + url + '"></iframe>';
    $('#tabs').tabs('add', {
        title: title,
        selected: true,
        closable: true,
        content: page
    });
}
</script>
</head>
<body>
		<div id="tabs" class="easyui-tabs" style="margin:10px;">
			<div title="菜单" >
			<ul >
				<li style="margin:10px;">
					<a href="javascript:void(0)"onclick="loadTabPage('标签页一','<%=utb.getURL("xx.do") %>')">标签页一</a>
				</li>
				<li style="margin:10px;">
					<a href="javascript:void(0)"onclick="loadTabPage('标签页二','<%=utb.getURL("xx.do") %>')">标签页二</a>
				</li>
			</ul>
				<br>
			</div>
		</div>
	</div>
</body>
</html>

修改版本为：点开菜单就自动加载两个页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../head.jsp"%>
<html>
<%=utb.getCSS()%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css"/>
<script src="<%=scriptPath%>jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function loadTabPage(title,url) {
   /*if ($('#tabs').tabs('exists', title)) {
        $('#tabs').tabs('select', title);
        return;
    }*/
    url = url + "&t=" + new Date().getTime();
    /*    var tabsOptions = $('#tabs').tabs('options'); 
    console.log(tabsOptions);
     var width = tabsOptions.width;
    var height = tabsOptions.height - tabsOptions.tabHeight - 5; */
    var page = '<iframe frameborder="0" style="width:100%;height:700px;" scrolling="auto" src="' + url + '"></iframe>';
    $('#tabs').tabs('add', {
        title: title,
        selected: true,
        closable: false,
        content: page
    });
}
$(function(){
	loadTabPage('xx','<%=utb.getURL("xx.do") %>');
	loadTabPage('xx','<%=utb.getURL("xx.do") %>');
});
</script>
</head>
<body>
	<div>
		<div id="tabs" class="easyui-tabs" style="margin:10px;">
		</div>
	</div>
</body>
</html>