easyui tab 加载iframe 高度问题

其实按网上搜的结果,easyui 有个data-options属性是fit:true. 加上他之后会使得自适应父类的宽高。

加上之后,发现个问题,当刷新tab内容的时候高度是对的,但是新建tab的时候高度还是没自适应。下面解决办法是,新建之后再update下当前选中的tab.简单暴力。立竿见影:

// 新建tab
function open1(plugin,route){
    if ($(‘#tt‘).tabs(‘exists‘,plugin)){
        $(‘#tt‘).tabs(‘select‘, plugin);
        // tab刷新内容
        var tab = $(‘#tt‘).tabs(‘getSelected‘);
        $("#tt").tabs(‘update‘, {
            tab: tab,
            options: {
                title: plugin,
                content: ‘<iframe scrolling="auto" frameborder="0"  src="‘+route+‘" style="width:100%;height:100%;"></iframe>‘,
                closable: true,
                selected:true
            }
        });
    } else {
        //var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘+route+‘" style="width:100%;height:100%;"></iframe>‘;

        $(‘#tt‘).tabs(‘add‘,{});

        // tab刷新内容 fix 自适应高度
        var tab = $(‘#tt‘).tabs(‘getSelected‘);
        $("#tt").tabs(‘update‘, {
            tab: tab,
            options: {
                title: plugin,
                content: ‘<iframe scrolling="auto" frameborder="0"  src="‘+route+‘" style="width:100%;height:100%;"></iframe>‘,
                closable: true,
                selected:true
            }
        });
    }
}  

之后又发现,在iframe右侧总出两个滚条。网上搜了个这个解决办法。加上之后 果然就剩下一个iframe自己的滚条了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
时间: 2024-10-06 16:54:13

easyui tab 加载iframe 高度问题的相关文章

jquery easyui tab加载内容的几种方法

转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: content方式加载数据的特点: 简单总结: href常见问题: 1.href只加载目标URL的html片段 2.短暂的页面混乱: 3.html片段的

easyui的tab加载页面中的form重复提交

http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的. 经分析发现,Easyui的tab加载页面

JQuery 动态加载iframe.

html: <iframe id="ifm" style="width:inherit;height:inherit" runat="server" ></iframe> <li data-options="iconCls:'icon-search'"> <a href="javascript:void(0)" onclick="showdata()&qu

EasyUI异步加载Tree实现(另类,简洁)

前言 前几天事情比较的多,回学校时候行李,邮寄包裹,归还图书准备毕业.之后又是入职体检,各种琐碎的小事,文章也停更了几次.今天正好有一些零碎的时间可以把之前的工作内容做一个总结整理.这篇文章就是关于EasyUI实现异步加载树的. 异步Tree 首先需明白的是这里所说的异步加载是一个宽泛的概念.以一个实际的树形菜单为例,一般情况下在数据量不大的时候,我们可以一次性的把数据加载出来,这是符合常理的.但是如果数据量大,更加合适的做法便是按树的层级,动态的加载某层级的数据,这样的一种描述就是这里所说的异

解决父页面加载iframe时,src链接中参数值过大导致加载失败的问题

有时候我们在使用iframe时,喜欢这么写 <iframe src="*******.do?param=****" id="leftFrame" name="leftFrame" frameborder="0"></iframe> 或者是使用js加载src: var params = "?pk_id="+pk_id; var frameLeftSrc = "<%=pa

js 滚动加载iframe框中内容

var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function(){ $("#content iframe[_src]").each(function(){ var t = $(this); if( t.offset().top<= $(document).scrollTop() + $(window).height() ) { t.attr(

post方式加载iframe

最近开发遇到一个问题,数据库某个字段里面存着整个html代码.需求是预览的时候需要可视化,将html直接展示到页面. 那么问题来了: 1.需要展示的html中的样式会与外面的页面冲突. 2.直接加载数据中的html,可能存着一些脚本错误. 首先想到的解决办法是用iframe,但是iframe是直接加载某个页面. 想到的方法是: iframe加载一个空页面,将HTML代码直接填充到空页面,然后显示. 这种方式可以成功.然而因为某些原因html代码不能再次从数据库读取,html代码参数需要传递,然而

EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图

使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了. 刚刚开始很混乱,等加载完成后,就好了. 参考这篇文章http://blog.csdn.net/zheng0518/article/details/12287801 搞定了. $.parser.onComplete,这个是在所有组件解析完成后执行的事件.其实这个事件很有用的.很多在布局用到easyui的时候总会出现一个问题.就是在一进入主界面的时候,页面的并不是马上就展现,而是会有一个混乱的过程,之后一闪就又好了. 其实

进击的UI-------------多种Cell混合使用&amp;懒加载&amp;自适应高度

1.自定义控件 2.model 3.多种cell混合使用 4自适应高度 5.懒加载