user_vip_
清风佛柳
采纳率87.5%
2014-12-26 05:49 阅读 9.6k
已采纳

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2014-12-26 06:48

    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 GoCityPass新加坡曼谷通票 2014-12-26 11:19

    放到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_ 清风佛柳 2014-12-29 01:19

    $(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>
    
    
    
    点赞 评论 复制链接分享
  • user_vip_ 清风佛柳 2014-12-29 01:23
      <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);
                   })
    
    
    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2014-12-29 02:50

    你变换过浏览器大小了是吧。。如果是最大化后,然后还原更改窗体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_ 清风佛柳 2014-12-29 05:39
     <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>
    
    点赞 评论 复制链接分享

相关推荐