zoukankan      html  css  js  c++  java
  • 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="100%;height:100%;"></iframe>',
                    closable: true,
                    selected:true
                }
            });
        } else {
            //var content = '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="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="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">  
  • 相关阅读:
    支付宝支付内容 尚未完成
    mvc 高并发解决方案之一---存储过程
    微信第三方平台开头篇--MVC代码(第三方获取ticket和公众号授权)
    卡券类字段
    Jquery 方法学习
    c# 对象反射赋值未知属性需类型转换
    C# enum 枚举 反射
    MVC c# 调用sql的存储过程
    Javascript装饰器原理
    关于阿里云的产品应用思考
  • 原文地址:https://www.cnblogs.com/hupan508/p/5135027.html
Copyright © 2011-2022 走看看