您的位置：首页 > 产品设计 > UI/UE

EasyUI Tabs

2015-09-09 08:20 405 查看

使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航