zoukankan      html  css  js  c++  java
  • 关于easyUI 的tabs 在子页面增加显示tabs的一个问题

    在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php
    现在说的是在子页面点个按钮也能触发增加子页面的情况。
    情景是,在父页面上有个div如:

    Html代码  

    1.<div class="easyui-tabs" id="main" fit="true" border="false">  
    2.  <div title="Welcome" iconCls="icon-page" style="padding:20px;overflow:hidden;">     
    3.  </div>  
    4.</div>  
    <div class="easyui-tabs" id="main" fit="true" border="false">
      <div title="Welcome" iconCls="icon-page" style="padding:20px;overflow:hidden;">  
      </div>
    </div>
    


     在子页面上有个

    Html代码 
    1.<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">test add subpage</a>    
    2.     
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">test add subpage</a> 
      现在想点这个链接能弹出一个新的tab,tab里面的内容是百度主页。关键的问题来了,就是testAddSubPage这个function怎么写。

    直接这样写是不行的:

    Js代码 

    1.function testAddSubPage(title,url){   
    2.               
    3.            var parentMain = window.parent.document.getElementById("main");   
    4.               
    5.            var $main = $(parentMain);   
    6.               
    7.            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>';    
    8.            $main.tabs('add',{   
    9.                    title:title,   
    10.                    content:content,   
    11.                    closable:true  
    12.                }   
    13.            );   
    14.               
    15.        }  
    function testAddSubPage(title,url){
       
       var parentMain = window.parent.document.getElementById("main");
       
       var $main = $(parentMain);
       
       var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>'; 
       $main.tabs('add',{
         title:title,
         content:content,
         closable:true
        }
       );
       
      } 


    这里虽然可以取到父页面那个id为main的div对象,但是把这个dom对象转化为jquery对象$main之后,$main.tabs('add',{...})这个方法死法报错不能通过。

    改正的关键是用top.jQuery这个函数,这个函数具体出外我忘记了,用法看似是取得整个父页面对象,正确是写法:

    asp.net代码 
    1.function testAddSubPage(title,url){    
    2.              
    3.            var jq = top.jQuery;    
    4.        
    5.            if (jq("#main").tabs('exists', title)){    
    6.                jq("#main").tabs('select', title);    
    7.            } else {  
    8.                  var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>';     
    9.                   jq("#main").tabs('add',{    
    10.                                      title:title,    
    11.                                      content:content,    
    12.                                      closable:true    
    13.                                    });    
    14.             }    
    15.        }   
    function testAddSubPage(title,url){ 
               
                var jq = top.jQuery; 
         
                if (jq("#main").tabs('exists', title)){ 
                    jq("#main").tabs('select', title); 
                } else {
                      var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>';  
                       jq("#main").tabs('add',{ 
                                          title:title, 
                                          content:content, 
                                          closable:true 
                                        }); 
                 } 
            }   
    这样,在子页面点击test add subpage这个链接之后,就会根据传入的url弹出另一个子页面,这里是百度。


     

  • 相关阅读:
    7.Ubuntu16.04安装Jenkins
    5.在Gitlab创建一个基于Sping Boot Maven项目
    4.ubuntu 16.04.6 离线安装 Git
    CNN注意事项_七月算法5月深度学习班第5次课程笔记
    Github 文件选择性上传
    一个Velocity Template Language学习的框架
    设计模式学习之代理模式(Proxy)
    ibatis入门教程一
    SimpleDataFormat详解
    使用Qmake在树莓派上开发Opencv程序
  • 原文地址:https://www.cnblogs.com/aflyfly/p/3408675.html
Copyright © 2011-2022 走看看