EasyUI 选项卡

最新推荐文章于 2023-04-16 10:08:28 发布

bear_cab

最新推荐文章于 2023-04-16 10:08:28 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI

本文链接：https://blog.youkuaiyun.com/phone13144830339/article/details/78886966

EasyUI 专栏收录该内容

3 篇文章

订阅专栏

<html>
	<head>
		<title>选项卡</title>
		<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/icon.css"/>
		<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.min.js"></script>
		<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
		<script>
			$(function (){
				//创建选项卡
				$('#tt').tabs({   
					border:false,   
					onSelect:function(title){   
						 //title：被选中的选项标题
					}   
				}); 
				//添加一个选项卡
				$('#tt').tabs('add',{   
					title:'其他',   
					content:'<div style="padding:20px;">其他</div>',   
					closable:true
					,iconCls:'icon-reload'
				}); 
			})
			
			function createTab(title,src) {
				//判断传入的title是否已经存在
				if($('#tt').tabs('exists',title)){
					$('#tt').tabs('select',title);
					return;
				}
				
				$('#tt').tabs('add',{   
					title:title,   
					content:'<iframe src="'+src+'" style="width:50%;height:50%"></iframe>',   
					closable:true
					,iconCls:'icon-reload'
				});
			}
		</script>
	</head>
	<body>
		<div id="tt" style="width:500px;height:250px;">  
			<button onclick="createTab('新建','myself.html')">创建一个新的选项</button>
			<div title="新闻" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">新闻</div>  
			<div title="娱乐" data-options="iconCls:'icon-reload',closable:true" style="overflow:auto;padding:20px;display:none;">娱乐</div>  
			<div title="体育" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">体育</div>  
		</div>  
	</body>
</html>