[心缘地方]同学录
首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版
登录系统:用户名: 密码: 如果要讨论问题,请先注册。

[整理]layer的弹窗调用,及子窗口的值回传~~

上一篇:[备忘]Git克隆clone,oschina的源码,超时,timeout~~
下一篇:[备忘]google chart api的小替代者,java servlet封装jfreechart实现

添加日期:2014/8/5 10:55:01 快速返回   返回列表 阅读14477次
layer官网:
http://sentsin.com/jquery/layer/

首先,是common.js,直接引用即可。



//字符串以xx结尾
String.prototype.endWith=function(endStr){
      var d=this.length-endStr.length;
      return (d>=0&&this.lastIndexOf(endStr)==d);
};

//父窗口调用此方法
function openWin(winTitle,winURL,width,height,callback){
    var winWidth = width==null?"90%":""+width;
    var winHeight = height==null?"90%":""+height;
    if(!winWidth.endWith("%"))winWidth+="px";
    if(!winHeight.endWith("%"))winHeight+="px";
    
    top.layer.open({
        type: 2,
        maxmin: false,
        title: winTitle,
        shade: [0.5,'#333'],
        offset: ['50px', ''], //上边距50像素
        area: [winWidth, winHeight],
        content:winURL
    }); 
    
    //保存callback,根据子窗口的index来索引
    if(callback && typeof(callback) === "function"){
        share.data(parent.layer.index,callback);
    }
 }
 
 //此方法由子窗口调用,故window.name是iframe页面的name
 function closeWin(data){
     
     //取得callback
     var callback = share.remove(parent.layer.getFrameIndex(window.name));
     if(callback && typeof(callback) === "function"){
         //callback初始是由父窗口创建的,所以此时回调时,仍然是父窗口执行的。
         callback(data);
     }
     
     //关闭窗口
     parent.layer.close(parent.layer.getFrameIndex(window.name));
 }
 
 
 var share = {

     /**
      * 跨框架数据共享接口
      * @param    {String}    存储的数据名
      * @param    {Any}        将要存储的任意数据(无此项则返回被查询的数据)
      */
     data: function (name, value) {
         var top = window.top,
             cache = top['_CACHE'] || {};
         top['_CACHE'] = cache;
         
         return value !== undefined ? cache[name] = value : cache[name];
     },
     
     /**
      * 数据共享删除接口
      * @param    {String}    删除的数据名
      */
     remove: function (name) {
         var cache = window.top['_CACHE'];
         var value = null;
         if (cache && cache[name]){
             value = cache[name];
             delete cache[name];
         }
         return value;
     }
     
 };



调用范例,


<%@ include file="../include/topLess.jsp"%>


登录名:
<input name=userLoginname type="text" class="button" id="userLoginname"
    value="${obj.userLoginname}" size="30" />
企业名称:
<input name=unitName type="text" class="button" id="unitName"
    value="${obj.mc}" size="20" />
企业地址:
<input name=unitName type="text" class="button" id="unitName"
    value="${obj.addr}" size="20" />
<br />
<input type="button" value="选择" onclick="selectOk()" />
<a href="#"
    onclick="openEditWin2('bbf6f41819834b6a9883e7f9a3a6fc1e',myCallBack)">[详细]</a>
    <input type="button" value="关闭" onclick="closeWin();" />
<div id="winName"></div>
<script>
    $("#winName").html(window.name);

    function myCallBack(obj) {
        $('#userLoginname').val(obj);
    }

    function openEditWin2(id, callback) {
        openWin("查看详情", "view?id=" + id, 600, 300, callback);
    }

    function selectOk() {
        closeWin($('#userLoginname').val());
    }
</script>
<%@ include file="../include/bottom.jsp"%>



一个页面,自己弹自己哈,有点乱,呵呵。

弹窗时,调用openWin方法,传一个回调方法的名字进来。
子窗口关闭时,调用closeWin方法,把要传的值扔进来即可。

然后父窗口的回调方法就执行了,随便操作父窗口吧。

这样,子窗口就独立了,无需知道父窗口的结构。
官方的例子写得真烂~~~
======================================
注意,新版的已经变写法了:
    top.layer.open({
        type: 2,
        title: '发票作废',
        maxmin: true,
        shadeClose: false, //点击遮罩关闭层
        area : ['1000px' , '600px'],
        content: ctx + '/invoiceHandel/add?flag=putong'
    });
最后是content接一个url,以前是iframe..
 

评论 COMMENTS
guest580623100
2015/5/8 19:25:57
结果
guest785385410
2016/7/26 15:35:44
guest252635950
2016/10/28 17:14:05
11
guest1054676884
2016/12/8 9:03:57
呵呵吧
guest560011575
2017/4/11 11:36:13
是打发

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码(不区分大小写)
Validation Code:
(not case sensitive)
看不清?点这里换一张!(Change it here!)
 
评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.
CopyRight © 心缘地方 2005-2999. All Rights Reserved