layout页面布局accordion折叠面板tabs选项卡面板

最新推荐文章于 2021-07-25 10:29:30 发布

a623982022

最新推荐文章于 2021-07-25 10:29:30 发布

阅读量418

点赞数

分类专栏： easyUI

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不介绍直接看效果，上代码，快速上手。

将easyUI的资源文件引入的页面中：

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

layout页面布局：

<body class="easyui-layout">
	<!-- 使用div元素描述每个区域 -->
	<div title="xxx管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
	<div title="系统菜单"style="width: 200px" data-options="region:'west'">西部区域</div>
	<div data-options="region:'center'">中心区域</div>
	<div style="width: 100px" data-options="region:'east'">东部区域</div>
	<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>

效果：

accordion折叠面板: 西部区域

<!-- 制作accordion折叠面板 fit:true----自适应(填充父容器)-->
<div class="easyui-accordion" data-options="fit:true">
	<!-- 使用子div表示每个面板 -->
	<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
	<div title="面板二">2222</div>
        <div title="面板三">3333</div>
</div>

效果：

tabs选项卡面板: 中心区域

<!-- 制作一个tabs选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
	<!-- 使用子div表示每个面板 -->
	<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
	<div data-options="closable:true" title="面板二">2222</div>
	<div title="面板三">3333</div>
</div>

动态添加选项卡：

api：

选中指定的选项卡和判断某个选项卡是否存在：

在折叠面板中添加一个a标签：

<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
	<script type="text/javascript">
		$(function(){
			//页面加载完成后，为上面的按钮绑定事件
			$("#but1").click(function(){
			//判断“系统管理”选项卡是否存在
			var e = $("#mytabs").tabs("exists","系统管理");
			if(e){
				//已经存在，选中就可以
				$("#mytabs").tabs("select","系统管理");
				}else{
				        //调用tabs对象的add方法动态添加一个选项卡
					$("#mytabs").tabs("add",{
						title:'系统管理',
						iconCls:'icon-edit',
						closable:true,
						content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
				});
			}
		});
	});
</script>