easyui-tabs 动态加载tabs，里面iframe，scrolling设置为auto,yes都不出现滚动条，内容无法全部显示，该怎么办？
easyui1.3.5没问题啊，是不是你加载的页面有问题。。你什么版本的
<div class="easyui-tabs" style="width:700px;height:250px" id="tabs">
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
<script>
$(function () { $('#tabs').tabs('add', { title: 'csdn', content: '<iframe src="http://bbs.csdn.net" scrolling="auto" style="width:100%;height:100%"></iframe>' }) })
</script>
放到layout里面也没问题的。你发代码的时候记得选中你的代码后点击</>这个标签格式化下，要不就会乱七八糟
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"><div class="easyui-tabs" style="width:700px;height:250px" id="tabs" data-options="fit:true">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div></div> <script>
$(function () { $('#tabs').tabs('add', { title: 'csdn', content: '<iframe src="http://bbs.csdn.net" scrolling="auto" style="width:100%;height:100%"></iframe>' }) })
</script>
</body>
$(document).ready(function () {
$('.easyui-accordion li a').click(function () {
var tabTitle = $(this).text();
var url = $(this).attr("href");
addTab(tabTitle, url);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
width: $('#mainPanle').width() - 10,
height: $('#mainPanle').height() - 26
});
} else {
$('#tabs').tabs('select', subtitle);
}
tabClose();
}
function createFrame(url) {
var s = '<iframe name="mainFrame" 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);
})
上面的是js.
这个是页面代码：
<div id="tabs" class="easyui-tabs" fit="false" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>欢迎使用！</h1>
</div>
</div>
</div>
<div id="mainPanle" region="center" style="overflow:hidden;">
<div id="tabs" class="easyui-tabs" fit="false" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>西安唐久连锁便利店！</h1>
</div>
</div>
</div>
上面是页面代码。
下面是js.
$(document).ready(function () {
$('.easyui-accordion li a').click(function () {
var tabTitle = $(this).text();
var url = $(this).attr("href");
addTab(tabTitle, url);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
width: $('#mainPanle').width() - 10,
height: $('#mainPanle').height() - 26
});
} else {
$('#tabs').tabs('select', subtitle);
}
tabClose();
}
function createFrame(url) {
var s = '<iframe name="mainFrame" 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);
})
你变换过浏览器大小了是吧。。如果是最大化后，然后还原更改窗体iframe确实是没有滚动条了。这个是easyui layout设置了tab body的宽度为初始化的浏览器宽度，父容器是依据浏览器实际宽度来定位，设置了overflow：hidden导致被隐藏起来了，自己写事件来重新你的tab body的宽度为auto即可。而且你也忘记给a的click事件return false阻止浏览器跳转了
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
width: $('#mainPanle').width() - 10,
height: $('#mainPanle').height() - 26
}).tabs('getSelected').css('width','auto');////////增加这句设置宽度为auto即可。。
具体分析看这个：easyui tabs content为iframe没有滚动条解决办法
<body class="easyui-layout">
<div region="west" split="true" title="导航菜单" style="width: 200px;">
<div id="item" class="easyui-accordion" fit="true" border="false">
<ul id="menu" class="easyui-tree" fit="false" border="false" >
<li>
<li data-options="state:'closed'">
<span>门店分组</span>
<ul>
<li><a><span>添加组</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="mainPanle" region="center" style="overflow:hidden;">
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>欢迎使用！</h1>
</div>
</div>
</div>
</body>