码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI Tabs

时间:2015-09-09 08:29:57      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

使用js来加载tab,防止多次加载

举例:

html代码

<body>
	<div id="tt" class="easyui-tabs"></div>
</body>

tab js调用方法

$(function() {
	var titleArray = [ "基本信息", "其它信息" ];
	var urlArray = [ "view?guid=${guid}", "other?guid=${guid}" ];

	loadTab(titleArray, urlArray);
});

js加载方法 

function loadTab(titleArray, urlArray) {

	for (var i = 0; i < titleArray.length; i++) {
		var content = ‘<iframe class="frame-size" src="‘ + urlArray[i] + ‘"></iframe>‘;
		$(‘#tt‘).tabs(‘add‘, {
			title : titleArray[i],
			content : content
		});
	}

	// 默认选中第一个
	$(‘#tt‘).tabs({
		selected : 0
	});

	// 高度自适应
	$(".frame-size").height($("body").height() - $(".tabs-header").height());
}

iframe自适应

iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

 

以前使用的方法,使用easyui-tabs来加载内容,使用iframe来展示内容

<body>
	<div id="tt" class="easyui-tabs">
		<div title="基本信息" data-options="selected:true"><iframe class="frame-size" src="view?guid=${guid}"></iframe></div>
		<div title="其它信息"><iframe class="frame-size" src="other?guid=${guid}"></iframe></div>
	</div>
</body>

  

 

EasyUI Tabs

标签:

原文地址:http://www.cnblogs.com/fengzhentian/p/4792536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!