Tabs（选项卡）

最新推荐文章于 2024-06-29 21:14:05 发布

墨渐生微

最新推荐文章于 2024-06-29 21:14:05 发布

阅读量1.4k

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/Mythology_px/article/details/83033905

版权

easyUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>选项卡:标签创建选项卡</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
  </head>
	<body>
		<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
	    	<div title="Tab1" style="padding:20px;display:none;">   
	        tab1   
	    	</div>   
	    	<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
	        tab2    
	    	</div>   
	    	<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
	        tab3    
	    	</div>   
		</div>
	</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>选项卡:通过Javascript创建选项卡</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
  	<script type="text/javascript">
  		$(function(){
			$('#tt').tabs('add',{    
			    title:'新选项卡',    
			    content:'选项卡内容',    
			    closable:true,    
			    tools:[{    
			        iconCls:'icon-mini-refresh',    
			        handler:function(){    
			            alert('refresh');    
			        }    
			    }]    
			}); 
  		});
  	</script>
  </head>
	<body>
		<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"></div>
	</body>
</html>

墨渐生微

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Tabs（选项卡）

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮 &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
复制链接

扫一扫

专栏目录