zoukankan      html  css  js  c++  java
  • EasyUI两种动态添加tab Iframe页面的方法

    /** 动态添加tab-----方式一     **/ 
        function addIframeTab(titleTxt,href,icon) {
            $('#mytabs').tabs('addIframeTab', {
                //tab参数为一对象,其属性同于原生add方法参数
                tab : {
                    title : titleTxt,
                    closable : false,
                    tools : [ {
                        iconCls : icon,
                        handler : function(e) {
                            var title = $(e.target).parent().parent().text();
                            $('#tabs').tabs('updateIframeTab', {
                                'which' : title
                            });
                        }
                    } ]
                },
                //iframe参数用于设置iframe信息,包含:
                //src[iframe地址],frameBorder[iframe边框,,默认值为0],delay[淡入淡出效果时间]
                //height[iframe高度,默认值为100%],width[iframe宽度,默认值为100%]
                iframe : {
                    src :href
                }
            });
            $('#mytabs').tabs('addEventParam');
        }
        
        /** 动态添加tab-----方式二     **/ 
        function addTab(title, href,icon){  
            var tt = $('#mytabs');  
            if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab          
                tt.tabs('select', title);  
                refreshTab({tabTitle:title,url:href});  
            } else {  
                 var content="";
                if (href){  
                    content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="100%;height:100%;"></iframe>';  
                } else {  
                    content = '未实现';  
                }  
                tt.tabs('add',{  
                    title:title,  
                    closable:false,  
                    content:content,  
                    iconCls:icon||'icon-default'  
                });  
            }  
        }  
        /**     
         * 刷新tab 
         * @cfg  
         *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
         *如果tabTitle为空,则默认刷新当前选中的tab 
         *如果url为空,则默认以原来的url进行reload 
         */  
        function refreshTab(cfg){  
            var refresh_tab = cfg.tabTitle?$('#mytabs').tabs('getTab',cfg.tabTitle):$('#mytabs').tabs('getSelected');  
            if(refresh_tab && refresh_tab.find('iframe').length > 0){  
            var _refresh_ifram = refresh_tab.find('iframe')[0];  
            var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;  
            //_refresh_ifram.src = refresh_url;  
            _refresh_ifram.contentWindow.location.href=refresh_url;  
            }  
        }  
         
         window.onload=function()
            {
                var pages=[{pageName:"task",title:"任务下发",icon:"icon-task"},{pageName:"track",title:"任务跟踪",icon:"icon-track"},{pageName:"report",title:"数据分析",icon:"icon-report"}];
                for (var i = 0; i < pages.length; i++) {
                    var href= PROJECT_URL + "/drilling/"+pages[i].pageName;
                    addTab(pages[i].title,href,pages[i].icon);
                }
            };

    注:第二种图标显示更好看一些。

    *点击tab切换页面处理

        var PROJECT_PID = parent.PROJECT_ID;
        var count = 0;
        var PROJECT_URL = "${ctx}";
        $(document).ready(function() {
            //更改父窗体显示的标签名称 
            parent.$("#mainContainer").panel({
                title : "@钻井工序"
            });
            //设置选项卡页面请求   
            $('#mytabs').tabs({
                border : false,
                onSelect : function(title) {
                    if (title == '任务下发' && count != 0) {
                        var reqUrl = PROJECT_URL + "/drilling/task";
                        refreshTab({tabTitle:title,url:reqUrl});  
                    } else if (title == '任务跟踪') {
                        count = 1;
                        var reqUrl = PROJECT_URL + "/drilling/track";
                        refreshTab({tabTitle:title,url:reqUrl});  
                    } else if (title == '数据分析') {
                        count = 1;
                        var reqUrl = PROJECT_URL + "/drilling/report";
                        refreshTab({tabTitle:title,url:reqUrl});  
                    }
                }
            }); 
        });
  • 相关阅读:
    Ubuntu中安装PyCharm2019并破解
    Spark RDD----pyspark第四次作业
    关于“xxx”object is not callable的异常
    sudo: 在加载插件“sudoers_policy”时在 /etc/sudo.conf 第 0 行出错 sudo: /usr/lib/sudo/sudoers.so 必须只对其所有者可写 sudo: 致命错误,无法加载插件
    Hash函数
    数字签名---RSA算法
    中级实训Android学习记录——Activity、Fragment
    中级实训Android学习记录——自定义Dialog、PopupWindow
    中级实训Android学习记录——Toast、AlertDialog、ProgressBar
    unity 3d 七、模型与动画
  • 原文地址:https://www.cnblogs.com/boonya/p/3529672.html
Copyright © 2011-2022 走看看