码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript-Tool-lhgDialog:传值示例

时间:2020-07-16 22:02:52      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:log   image   文本   close   参考   googl   cti   callback   参数   

ylbtech-JavaScript-Tool-lhgDialog:传值示例

 

1.返回顶部
1、

基本的传值示例(如您有不明白的地方可打开相应的示例文查看里面的相关代码)

注:所有示例都可象第一个示例那样通过多种方式实现,除第一个示例使用多种方式外其它示例都使用一种方式,您可根据示例1自行尝试其它示例的其它实现方法!

  1. 将调用页面的值传到窗口中

     

    /* 方式一 在内容页里写代码取值 */
    /* 下面的代码为内容页value01.html页面里的代码,请自行打开此文件查看代码 */
    var api = frameElement.api, W = api.opener;
    window.onload = function()
    {
        document.getElementById(‘itxt‘).value = W.document.getElementById(‘txt1‘).value;
    };
    ------------------------------------------------------
    /* 方式二 在调用窗口代码里使用init参数写入值 */
    /* 下面的代码为 运行2 按钮调用窗口组件的代码 */
    $(‘#demo_02‘).dialog({
        content:‘url:value/value02.html‘,
        init:function(){
            /* this.iwin 为窗口内容页的window对象 */
            this.iwin.document.getElementById(‘itxt‘).value = document.getElementById(‘txt1‘).value;
        }
    });
    ------------------------------------------------------
    /* 方式三 在调用窗口代码里使用data参数来传入值 */
    /* 下面的代码为 运行3 按钮调用窗口组件的代码 */
    $(‘#demo_02‘).dialog({
        content:‘url:value/value02.html‘,
        data:document.getElementById(‘txt1‘).value;
    });
    /* 下面的代码为内容页value03.html页面里的代码,请自行打开此文件查看代码 */
    var api = frameElement.api;
    window.onload = function()
    {
        document.getElementById(‘itxt‘).value = api.data;
    };

       

  2. 将窗口中的值传回到调用页面中

    注:实现的方法也有很多种,请自行尝试

    /* 下面的代码为内容页value04.html页面里的代码,请自行打开此文件查看代码 */
    var api = frameElement.api, W = api.opener;
    api.button({
        id:‘valueOk‘,
        name:‘确定‘,
        callback:ok
    });
    /* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */
    function ok()
    {
        W.document.getElementById(‘txt2‘).value = document.getElementById(‘itxt‘).value;
    };

     

  3. 在调用页面调用窗口B中的值或函数

    注:实现的方法也有很多种,请自行尝试

    /* 下面的代码为:“调用B窗口中文本框的值” 按钮所调用的函数的代码 */
    function getValue1()
    {
        if( !demoDG1 || demoDG1.closed )
            alert( ‘请先打开B窗口‘ );
        else // demoDG1.content 为B窗口内容页面的window对象
            alert( demoDG1.content.document.getElementById(‘itxt‘).value );
    };
    ------------------------------------------------------
    /* 下面的代码为:“调用B窗口的函数” 按钮所调用的函数的代码 */
    function getFunc1()
    {
        if( !demoDG1 || demoDG1.closed )
            alert( ‘请先打开B窗口‘ );
        else // demoDG1.content 为B窗口内容页面的window对象 BB()为B窗口内容页中的一个函数
            demoDG1.content.BB();
    };

      

  4. 在调用页面调用窗口B中的值或函数

    注:实现的方法也有很多种,请自行尝试

    /* 下面的代码为内容页value06.html页面里的代码,请自行打开此文件查看代码 */
    var api = frameElement.api, W = api.opener;
    // getValue函数为内容页value06.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
    function getValue()
    {
        alert( W.document.getElementById(‘txt3‘).value );
    };
    // 下面的代码为内容页value06.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
    W.AA();

     

  5. 在调用页面调用C窗口(也就是B窗口的子窗口)的值或函数

    注:实现的方法也有很多种,请自行尝试

    /* 方式一 直接使用js原生方法来实现 */
    function getValue2()
    {
        // demoDG2.content 为B窗口内容页的window对象
        if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
            alert( ‘请先打开C窗口‘ );
        else // demoDG2.content.cDG 为B窗口中调用C窗口的实例对象 demoDG2.content.cDG.content 即为C窗口内容页的window对象
            alert( demoDG2.content.cDG.content.document.getElementById(‘itxt‘).value );
    };
    function getFunc2()
    {
        if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
            alert( ‘请先打开C窗口‘ );
        else
            demoDG2.content.cDG.content.CC();
    };
    ------------------------------------------------------
    /* 方式二 通过窗口的id参数来实现 (推荐使用这种方法来实现,这种方法更直观,更易理解) */
    function getValue3()
    {
        /* 通过$.dialog.list[‘id‘]对象来获取C窗口的实例对象,其中的id即为创建C窗口的id
        if( !$.dialog.list[‘demo_c‘] || $.dialog.list[‘demo_c‘].closed )
            alert( ‘请先打开C窗口‘ );
        else
            alert( $.dialog.list[‘demo_c‘].content.document.getElementById(‘itxt‘).value );
        */
           
    // 通过内部的get(‘id‘)方法来获取C窗口内容页window对象,其中的id即为创建C窗口的id(最推荐使用的方法)
    // get方法有2个参数get(‘id‘,1)其中第二个参数只有为数字1时返回窗口实例对象,如不写或为其它任何值都返回窗口内容页的window对象
        if( !demoDG2 || !demoDG2.get(‘demo_c‘) )
            alert( ‘请先打开C窗口‘ );
        else
            alert( demoDG2.get(‘demo_c‘).document.getElementById(‘itxt‘).value );
    };
    function getFunc3()
    {
        /*
        if( !$.dialog.list[‘demo_c‘] || $.dialog.list[‘demo_c‘].closed )
            alert( ‘请先打开C窗口‘ );
        else
            $.dialog.list[‘demo_c‘].content.CC();
        */
        // 演示示例都是使用的get内部方法来实现的
        if( !demoDG2 || !demoDG2.get(‘demo_c‘) )
            alert( ‘请先打开C窗口‘ );
        else
            demoDG2.get(‘demo_c‘).CC();
    };

      

     

  6. 在C窗口(也就是B窗口的子窗口)中调用组件调用页面中的值或函数

    注:实现的方法也有很多种,请自行尝试

    /* 下面的代码为内容页value10.html页面里的代码,请自行打开此文件查看代码 */
    var api = frameElement.api, W = api.opener;
    // getValue函数为内容页value10.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
    function getValue()
    {
        alert( W.document.getElementById(‘txt4‘).value );
    };
    // 下面的代码为内容页value10.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
    W.AA();

     

综合的传值示例

注:各种调用页面与窗口间的各种方法的传值示例,请自行打开相应文件查看代码

  1. 多窗口间,页面与窗口间的综合传值

     

    注:由于代码量较大,这里不再写其相关代码,各种方法的相关代码请自行打开相应的文件查看相关的代码,代码中都带有注释!
    注:本示例都使用窗口id的属性,内部的get方法来实现,至于其它实现方法您可参考前面的示例来完成!

     

       

       

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
技术图片 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

JavaScript-Tool-lhgDialog:传值示例

标签:log   image   文本   close   参考   googl   cti   callback   参数   

原文地址:https://www.cnblogs.com/storebook/p/13324340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!