zoukankan      html  css  js  c++  java
  • 借用layer让弹层不限制在iframe内部

    使用方法:

    1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用。

    2 使用前在layer的js后边把该js引入(可以命名为layerExtend)。

    3 layerExtend中只包含一个endHandle回掉方法并且有一个data参数,用于关闭当前弹出层并给上一个弹层回传值。

    4 当前弹层给上一个弹层设置值只需要在触发事件时调用zlayer.returnData("你的回传值");   而上一个弹出层取值时只需要使用endHandle中的data参数即可。

    5 例如:

      $("#btn1").click(function () {
            zlayer.open({
                content: "test2.html",
                isRefresh: true,//是否刷新上及页面
                endHandle: function (data) {
                    $("#div1").html(data); //接收回传值后的处理
                }
            });
        });

    完整插件代码:(有兴趣的可以看下Zlayer和zlayer在不同的场景有何不同)

    /*!
     @Name:layerExtend辅助弹层
     @Author:ZZQ
     */
    ; window.Zlayer = (function () {
        "use strict";
        var _dataMap = {}, _indexArray = [], _refresh = 0 & 1, _inputParamsArray = [],
            refreshParent = function () {
                _refresh = 1;
            },
        _checkNullObject = function (obj) {
            if (typeof obj === "object" && !(obj instanceof Array)) {
                var hasProp = 0;
                for (var prop in obj) {
                    hasProp = 1; break;
                }
                if (!!hasProp) return 0; return 1;
            }
        },
        _pop = function (array) {
            var _ret = _indexArray.pop();
            if (typeof (_ret) == "undefined") throw "dataArray remove item fail!"; return _ret;
        },
         _saveMetaData = function (layero, index) {
         if (_indexArray.indexOf(index) != -1) return;
             _indexArray.push(index);
             _dataMap[_indexArray[_indexArray.length - 1]] = { "backData": null, "currDiv": layero };
         },
         _postData = function (params) {
             _inputParamsArray.push(params);
         },
         returnData = function (data) {
             _dataMap[_indexArray[_indexArray.length - 1]].backData = data;
         },
         getInputParams = function () {
             return _inputParamsArray[_inputParamsArray.length - 1];
         },
         open = function (options) {
             options = options || {};
             if (!!_checkNullObject(options)) throw "open Function input is empty object!";
             _postData(!!options.inputParams && options.inputParams || null);
             !options.title && delete options.title;
             delete options.success;
             delete options.end;
             delete options.cancel;
             var _layerOptions = {
                 type: 2,
                 title: "...",//input
                 content: "",//input
                 area: ['900px', '500px'],//input
                 maxmin: 0,
                 zIndex: layer.zIndex,
                 isRefresh: 0,//input
                 shadeClose: 0,
                 success: function (layero, index) {//index不是连续的
                     _saveMetaData(layero, index);
                 },
                 end: function () {
                     if (_indexArray.length <= 0) {
                         options.endHandle(-1);
                         return;
                     }
                     var _ret = _pop(_indexArray);
                     !!_refresh && (options.isRefresh = 1);
                     _inputParamsArray.pop();
                     options.endHandle(_dataMap[_ret].backData);//如果没有设置需要的层级返回值则返回空串
                     delete _dataMap[_ret];
                     if (!!options.isRefresh) {
                         if (_indexArray.length > 0) {
                             $(_dataMap[_indexArray[_indexArray.length - 1]].currDiv).find("iframe").get(0).contentWindow.location.reload();
                             _pop(_indexArray);
                         } else window.location.reload();
                     }
                     _refresh = 0 & 1;
                 },
                 cancel: function () { }
             };
             $.extend(_layerOptions, options);
             layer.open(_layerOptions);
         },
         openCompatible = function (title, content, width, height, inputParams, isRefresh, callBack) {
             var _tmpOptions = {
                 title: title,//input
                 content: content,//input
                 area: [width, height],//input
                 isRefresh: isRefresh,//input
                 inputParams: inputParams,//input
                 endHandle: callBack
             };
             open(_tmpOptions);
         },
         findTopIframe = function () {
             var curr = self,
                 iframeObj = curr;
             while (curr != window.top) {
                 iframeObj = curr;
                 curr = curr.parent;
             }
             return iframeObj.Zlayer;
         },
         close = function () {
             layer.close(_indexArray[_indexArray.length - 1]);
         },
         exit = function () {
             $(_dataMap[_indexArray[_indexArray.length - 1]].currDiv).find("span").find("a").click();
         };
        return {
            refreshParent: refreshParent,
            target: findTopIframe,
            open: open,
            exit: exit,
            close: close,
            ShowModelDialog: openCompatible,
            returnData: returnData,
            getInputParams: getInputParams
        };
    })();
    window.zlayer = Zlayer.target();        

     

  • 相关阅读:
    Navicat远程连接服务器Mysql
    JSP与Servlet之间传值
    JSP获取绝对路径
    PIL的库学习
    科学计算与可视化
    预测球类比赛结果
    预测球类比赛结果
    汉诺塔问题
    有进度条圆周率计算
    turtle学习心得
  • 原文地址:https://www.cnblogs.com/zzq-include/p/5237484.html
Copyright © 2011-2022 走看看