jQuery+easyui tabs 标签页

最新推荐文章于 2021-10-28 19:14:38 发布

chaoyv

最新推荐文章于 2021-10-28 19:14:38 发布

阅读量150

点赞数

分类专栏： Struts2 文章标签： javascript java ui ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/88303120

版权

Struts2 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>对话框</title>
<!-- easyui 主题样式 -->
<link rel="stylesheet" href="themes/icon.css" type="text/css" />
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- easy ui -->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!-- 本地化 -->
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	$("#tt1").tabs({//是否显示边框
		border:true,
		onSelect:function(title){
			$.messager.alert("信息",title+"被选中","info");
		},
		onBeforeClose:function(title){
			//返回 false ，则不关闭
			return confirm("真的要关闭吗"+title+"吗？");
		}
	});
});
//动态添加 Tab
function addTab(){
	$("#tt1").tabs("add",{
		title:"newAdd",//标题
		content:"tabBody",//内容
		closable:true,//可以关闭
		tools:[{
			iconCls:"icon-mini-refresh",//代表 1 个工具按钮
			headler:function(){
				$messger.alert("信息","被刷新了","info");
			}
		}]
	});
}
</script>
</head>
<body>
<a href="javascript:addTab()" class="easyui-linkbutton">添加Tab</a>
<div id="tt1" class="easyui-tabs" style="width: 500px; height: 250px;">
	<div title="Tab1" style="padding: 20px;">tab1</div>
	<div title="Tab2" closable="true" style="overflow: auto; padding: 20px;">tab2</div>
	<div title="Tab3" iconCls="icon-reload" closable="true" style="padding: 20px;">tab3</div>
</div>
</body>
</html>

效果图：