`
bee1314
  • 浏览: 166195 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

easyui 多个tab中包含多个iframe的问题

阅读更多

场景:

       最近用tornado写了一个简单的日志查询的小project,在ui使用easyui来整体解决,之前在使用easyui时都是左侧是菜单栏,当点击菜单动态生成一个tab,但是因为project太简单了没有必要菜单栏的存在,直接两个tab切换即可,因为想简单所以在每个tab中包含一个iframe来调用不同的页面,但是测试发现当存在多个iframe的时候,tab中页面显示会凌乱,width:0px。

 

解决办法,动态创建iframe,当切换到第二个或者后面的tab时,动态创建iframe。

$(function() {
        var tab = $("#content").tabs({
            onSelect: function(title, index) {
                if (index == 1) {
                    if (window.frames.length == 2) {
                        return false;
                    }
                    var tab = $("#content").tabs("getSelected");
                    $("#content").tabs("update", {
                        tab: tab,
                        options: {
                            content: '<iframe id="userlog" src="/userlog" frameborder="0" style="width:100%;height:99%" scrolling="no"></iframe>'
                        }
                    });
                }
            }
        });
    });

 

分享到:
评论

相关推荐

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时,特别是在使用tab布局的时候,开发者可能会遇到页面内容被放置在iframe中时,页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生,因为easyui会默认加载所有tab的内容,...

    关闭easyui 的tab 释放iframe的内存

    默认情况下,当用户通过EasyUI关闭一个包含`&lt;iframe&gt;`的标签页时,该`&lt;iframe&gt;`及其内部的内容并不会被真正移除或销毁,而是一直保留在内存中。这意味着即使标签页不可见,其内容仍然消耗着系统资源。随着用户频繁地...

    jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法

    EasyUI的Tabs是一个多标签页容器,它可以容纳多个子页面,每个子页面通常包含一个iframe,用于加载不同的内容。这种设计模式在现代Web应用中非常常见,因为它允许各个功能模块独立加载和更新,提高了用户体验。 要...

    如何解决jQuery EasyUI 已打开Tab重新加载问题

    在jQuery EasyUI框架中,`tabs`组件是一个常用的布局组件,用于创建多标签页面。当用户需要在已打开的Tab中实现数据的刷新和重新加载时,可能会遇到一些挑战。本文将详细介绍如何解决jQuery EasyUI中已打开Tab的重新...

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    代码示例中,通过传递Tab选项卡的title参数,使用jQuery EasyUI的API方法"getTab"找到对应的Tab对象,并使用"select"方法来选中这个Tab,然后再执行更新内容的操作。 3. 代码实现:在示例代码中,定义了两个函数,...

    实例代码讲解jquery easyui动态tab页

    在 EasyUI 中,`Tabs` 组件是一个常用的功能,用于创建多标签页式界面,类似于浏览器中的标签页。本文将深入讲解如何使用 jQuery EasyUI 动态添加和刷新 Tab 页面。 首先,添加一个新的 Tab 页面主要通过调用 `tabs...

    jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列组件,包括 Tab 选项卡,用于构建用户界面。本文将深入探讨在使用 jQuery EasyUI Tab 选项卡时可能会遇到的问题及其解决方案。 首先,让我们理解基本的...

    easyui简单的增删改查范例

    4. 创建Tab页内容:Tab页内容是通过iframe加载的,这在easyui中是常见的方式,可以快速嵌入其他页面或者远程内容。不过这种做法在现代Web开发中已不太推荐,因为iframe存在跨域限制、影响SEO、性能问题等。 这个...

    Easyui 关闭jquery-easui tab标签页前触发事件的解决方法

    假设你有一个应用,其中用户可以在多个tab之间切换,每个tab可能承载着不同的子页面,这些子页面可能在后台执行一些异步任务。当用户尝试关闭一个tab时,你可能需要检查该tab内的任务是否已经完成,只有在任务结束时...

    Easyui 去除jquery-easui tab页div自带滚动条的方法

    EasyUI的Tab是由多个部分组成的,包括Tab头(tabs-header)和Tab内容区域(tabs-panels)。在内容区域中,每个Tab页被封装在一个div面板(panel)内,面板的主体部分(panel-body)是容纳内容的地方,滚动条就出现在...

    jQuery EasyUI 布局之动态添加tabs标签页

    Tabs 是一种方便的信息组织方式,可以将多个内容区域分割到不同的标签页中,用户可以通过点击标签在各个内容之间切换。在本文中,我们将探讨如何通过调用 `add` 方法来动态添加 tabs。 首先,我们需要创建一个基础...

    JQuery EasyUI 结合ztrIee的后台页面开发实例

    在上述代码中,`zTreeOnClick`函数会根据用户点击的节点,动态创建一个iframe或者在zTree的tab页中加载相应的内容。这使得开发者可以轻松地为每个节点绑定具体的页面内容。 在实际开发中,开发者需要根据自己的需求...

    MVC+EasyUI+三层新闻网站建立 tabs标签制作方法(六)

    在本文中,我们将深入探讨如何使用MVC架构、EasyUI框架以及三层架构来创建一个新闻网站,并特别关注如何在...在实际开发中,还需要考虑数据的获取和处理、错误处理、性能优化等多个方面,以确保网站的稳定性和高效性。

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    Django获取多个数据以及文件上传 Django的CBV和FBV Django模板语言循环字典 Django基于正则表达式的URL Django对应的路由名称 Django路由分发 DjangoORM基本创建基本类型以及生成数据库结构 DjangoORM使用mysql注意 ...

Global site tag (gtag.js) - Google Analytics