$(function() {
for ( var i = 0; i < 1; i++) {
addTab(i, 'http://www.163.com');
}
});
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true
});
$('#tabs').tabs('getSelected').css('width', 'auto');
//重新tab body宽度为auto,如果你上面的添加语句设置了selected为false,注意使用下面注释的这句来获取你的tab
//$('#tabs').tabs('getTab', subtitle).css('width', 'auto');
}
tabClose();
$('#tabs').tabs('getSelected').css('width', 'auto');
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url
+ '" style="width:100%;height:100%;"></iframe>';
return s;
}
function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function() {
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close', subtitle);
});
}
<div title="欢迎使用" style="padding: 20px; overflow: hidden;height: auto;width: 100px;" id="home">
<h1>
<a href="javascript:addTab('test','addTDemo.jsp');">111</a>
</h1>
</div>
</div>
运行后的代码
style="width: auto; height: auto;">
style="margin-left: 0px; left: 0px; width: 1598px;">
<div class="panel" style="display: block; width: auto;">
<div title=""
style="padding: 20px; overflow: hidden; height: auto; width: 1558px;"
id="home"
class="panel-body panel-body-noheader panel-body-noborder">
<h1>
<a href="javascript:addTab('test','addTDemo.jsp');">111</a>
</h1>
</div>
</div>
<div class="panel" style="display: none; width: auto;">
<div title=""
class="panel-body panel-body-noheader panel-body-noborder"
style="width: 1598px; height: auto;">
<iframe scrolling="auto" frameborder="0" src="http://www.163.com"
style="width:100%;height:100%;"></iframe>
</div>
</div>
</div>
</div>
""
高度很低。