• 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});  
                    }
                }
            }); 
        });


  • 相关阅读:
    Spring小结
    ByteBuffer使用之道
    NIO组件Selector调用实例
    NIO组件Selector详解
    NIO机制总结
    NIO组件Selector工作机制详解(下)
    javascriptBOM_DOM
    【前端】javascript基础学习
    【前端】CSS基础学习
    【mongodb】比较符及修改器
  • 原文地址:https://www.cnblogs.com/aiwz/p/6153891.html
Copyright © 2020-2023  润新知