easyui tabs content为iframe没有滚动条解决办法

  easyui tabs content为iframe时没有出现滚动条,或者无法占满容器的宽度(iframe设置了width:100%),出现这个问题是因为更改过浏览器窗体的大小导致的。

  DEMO

<div id="mainPanle" region="center">
   <div id="tabs" class="easyui-tabs"  border="false"><div title="easyui tab" style="padding:20px;"><h1>easyui tabs content为iframe没有滚动条解决办法</h1></div></div>        
   网站列表
   <ul><li><a href="http://bbs.csdn.net">csdn</a></li></ul>
</div>
<script>
    $(document).ready(function () {
        $('#mainPanle a').click(function () { addTab($(this).text(), $(this).attr('href')); return false });
        function addTab(subtitle, url) {
            if (!$('#tabs').tabs('exists', subtitle))
                $('#tabs').tabs('add', { title: subtitle, content: '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>', closable: true });
            else $('#tabs').tabs('select', subtitle);
        }
    });
</script>

easyui tabs content为iframe没有滚动条解决办法
初始化,没有问题,iframe有滚动条

 

 

easyui tabs content为iframe没有滚动条解决办法
浏览器窗体缩小,滚动条隐藏

easyui tabs content为iframe没有滚动条解决办法
窗体放大,滚动条显示,但是无法占满容器


  原因:easyui 给容器设置了overflow:hidden的样式,并且设置了tab body的宽度为初始化的浏览器宽度,父容器是依据浏览器实际宽度来定位。当tab添加好后,更改浏览器窗体可能出现2个问题。

  • 当宽度小于初始化宽度就会导致iframe的滚动条隐藏起来
  • 如果大于初始化宽度,会导致iframe没有占满整个父容器。

easyui tabs content为iframe没有滚动条解决办法
tab body设置了宽度


  在添加新tab时重新设置tab body的宽度为auto即可解决浏览器大小更改后iframe没有滚动条或无法占满容器的问题。

        function addTab(subtitle, url) {
            if (!$('#tabs').tabs('exists', subtitle)) {
                $('#tabs').tabs('add', { title: subtitle, content: '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>', closable: true });
                $('#tabs').tabs('getSelected').css('width', 'auto'); //重新tab body宽度为auto,如果你上面的添加语句设置了selected为false,注意使用下面注释的这句来获取你的tab
                //$('#tabs').tabs('getTab', subtitle).css('width', 'auto');
            }
            else $('#tabs').tabs('select', subtitle);
        }

 


原创文章,转载请注明出处:easyui tabs content为iframe没有滚动条解决办法

评论(0)Web开发网
阅读(5427)喜欢(0)不喜欢(0)easyui