zoukankan      html  css  js  c++  java

  • easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    <!-- 父页面 -->

    [html] view plain copy
     
    1. <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">    
    2. <html>    
    3. <head>    
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
    5. <title>父页面</title>    
    6. <!-- 引用easyUi的文件 -->    
    7. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">    
    8. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">    
    9. <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>    
    10. <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>    
    11. <!-- 国际化 -->    
    12. <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>    
    13.     
    14. </head>    
    15. <body>    
    16.     
    17.     <a href="javascript:void(0)" onclick="openWin();">点击打开隐藏的window窗口</a>    
    18.         
    19.     <!--隐藏的文本框-->    
    20.     <div id="win" class="easyui-window" title="My Window" style="600px;height:400px" closed="true"    
    21.             data-options="iconCls:'icon-save',modal:true">       
    22.             
    23.         <div data-options="region:'north',title:'North Title',split:true" style="height:50px;">    
    24.     
    25.             <a href="javascript:void(0)" onclick="wen('son.html')">子页面son.html</a>    
    26.             <input type="button" value="给子页面赋值" onclick="assgVal();" />   
    27.             <input type="text" name="fatherId" id="fatherId" value="父页面的文本框" /> <br/>  
    28.             <input type="text" name="fatherText" id="fatherText" value="给子页面赋的值!" />   
    29.         </div>    
    30.             
    31.         <div id="centers" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;height:90%">    
    32.             引用外部html文件    
    33.         </div>    
    34.     </div>    
    35.         
    36.     <script type="text/javascript">    
    37.             
    38.         //打开隐藏的win窗口    
    39.         function openWin(){    
    40.             $("#win").window("open");    
    41.         }    
    42.              
    43.         //给子页面的文本框赋值    
    44.         function assgVal(){  
    45.             var fatherText = $("#fatherText").val();  
    46.             $('#son').contents().find("#sonId").val(fatherText);    
    47.         }    
    48.     
    49.         /* 引用子页面index1.html */    
    50.         function wen(src){    
    51.             var hrefs = "<iframe id='son' src='" + src + "' allowTransparency='true' style='border:0;99%;height:99%;padding-left:2px;' frameBorder='0'></iframe>";    
    52.             $("#centers").html(hrefs);    
    53.         }    
    54.              
    55.         //关闭window窗口    
    56.         function closeWin(){    
    57.             $("#win").window("close");    
    58.         }    
    59.             
    60.     </script>    
    61. </body>    
    62. </html>  



    <!-- 子页面 -->

    [html] view plain copy
     
    1. <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">    
    2. <html>    
    3. <head>    
    4.     <title>子页面</title>    
    5.     <!-- 引用easyUi的文件 -->    
    6. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">    
    7. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">    
    8. <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>    
    9. <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>    
    10. <!-- 国际化 -->    
    11. <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>    
    12. </head>    
    13. <body>    
    14.     <h1>你好,这是子页面</h1>    
    15.     <input type="text" name="sonId" id="sonId" value="" /><br/>  
    16.     <input type="text" name="sonText" id="sonText" value="给父页面的文本框赋值" />  
    17.     <button onclick="farassgVal();">给父页面的文本框赋值</button>    
    18. </body>    
    19.     
    20. <script type="text/javascript">    
    21.     
    22.     //调用父页面的赋值方法    
    23.     $(window.parent.assgVal());    
    24.         
    25.     $(function(){    
    26.         alert($("#sonId").val());    
    27.         //调用父页面的关闭win窗口的方法    
    28.         //window.parent.closeWin();    
    29.     });    
    30.         
    31.     //给父页面的文本框赋值    
    32.     function farassgVal(){    
    33.         var sonText = $("#sonText").val();  
    34.         $(window.parent.$("#fatherId").val(sonText));      
    35.     }    
    36.         
    37. </script>    
    38. </html>    


    第一:

    第二:

    第三:

    第四:

    第五:

    代码下载地址:
  • 相关阅读:
    递推 hdu 1396
    递推 hdu 3411
    Eclipse中git上如何把自己的分支保存到远端
    api-gateway-engine知识点（1）
    Java知识点ArrayList
    如何利用VMware安装XP系统
    IOP知识点（1）
    Eclipse如何导入DemoWeb.rar
    mysql忘记root密码
    实习培训——Java多线程（9）
  • 原文地址：https://www.cnblogs.com/tsql/p/7681096.html
Copyright © 2011-2022 走看看