EasyUI之选项卡Tabs

最新推荐文章于 2023-05-17 11:41:33 发布

iteye_8264

最新推荐文章于 2023-05-17 11:41:33 发布

阅读量222

点赞数

文章标签： javascript ViewUI

1、实例背景

EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容

2、实现实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之选项卡Tabs</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			$(function(){
				$('#season').tabs({
				    border:false,
				    onSelect:function(title){
				    	var tab = $('#season').tabs('getSelected');
						var index = $('#season').tabs('getTabIndex',tab);
				        alert("您选中是第"+(index+1)+"个，名称是："+title);
				    }
				});
			});	
		</script>
	</head>
	<body>
		<div id="season" class="easyui-tabs" style="width:1340px;height:620px">
	        <div title="春季" data-options="closable:true" style="padding:10px">
	            
	        </div>
	        <div title="夏季" data-options="closable:true" style="padding:10px">
	            
	        </div>
	        <div title="秋季" data-options="closable:true" style="padding:10px">
	            
	        </div>
	        <div title="冬季" data-options="closable:true" style="padding:10px">
	           
	        </div>
	    </div>
	</body>
</html>

3、实现结果