easyui-tabs 动态加载tabs里面iframe scrolling无法出现滚动条

easyui-tabs 动态加载tabs,里面iframe,scrolling设置为auto,yes都不出现滚动条,内容无法全部显示,该怎么办?

6个回答

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>
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复user_vip_: 放到layout里面也没问题啊?最好发你完整代码来看
接近 6 年之前 回复
user_vip_
清风佛柳 回复showbo: 我按你写的代码写的单独页面确实有滚动条。但放在 easyui layout 框架 里面就不行了!
接近 6 年之前 回复
user_vip_
清风佛柳 回复showbo: firefox. js 设置的scrolling 为 auto.
接近 6 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复user_vip_: 1.4.1也没有问题,iframe是独立的窗体,除非你自己用js动态设置过iframe的scroll,要不会出现滚动条的。你的什么浏览器?
接近 6 年之前 回复
user_vip_
清风佛柳 Current Version: 1.4.1.还是不行!我把fit设置为false也不行!
接近 6 年之前 回复

放到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>
user_vip_
清风佛柳 代码我贴出来了,麻烦看看!
接近 6 年之前 回复

$(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没有滚动条解决办法

user_vip_
清风佛柳 OK,页面完整代码贴出来了
接近 6 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 你最好发完整的代码,你的accordion在哪里没有贴出来。。
接近 6 年之前 回复
user_vip_
清风佛柳 不行啊,搞不定! 不知道为什么啊!
接近 6 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复user_vip_: 一样的。。你最大化的时候设置了宽度,你问题是一定要将宽度给设置为auto才行,easyui 的tabs-panels样式也设置了overflow:hidden
接近 6 年之前 回复
user_vip_
清风佛柳 我firebug看下代码。里面有个属性:<body class="easyui-layout layout panel-noscroll">。panel-noscroll。是不是跟这个有关呐!
接近 6 年之前 回复
user_vip_
清风佛柳 加这个代码还是不行啊!大神,加个Q吧!2210678357.
接近 6 年之前 回复
 <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>
user_vip_
清风佛柳 知道了!我找到问题了!我在子页面加了"easyui-layout".多谢帮忙! - -
接近 6 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 你这个布局我这里测试根本没有问题,也不用加代码控制。你可以去这里看:http://www.coding123.net/easyui/你用什么浏览器测试的?发个在线demo看看,我这里firefox12,chrome38,ie8测试都没你说的问题
接近 6 年之前 回复
立即提问
相关内容推荐