在多人合作开发的项目中,我们需要尽量保证每个编程人员的代码风格尽量一致,系统风格一致。因此我们经常需要针对一些公用的功能封装一些公用的方法。

例如在使用layer这个框架时,可能不同的同事使用的样式风格就有差异,所以我们有必要基于layer的方法再进行包装一次,让项目对layer透明化,项目组成员

只需知道我们自己项目中封装的方法即可,这样可以减少不必要的沟通成本。

以下是个人写的一些公用的layer基本方法,基本可以满足各种需求,如有补全可以提出来进行补充,如有不对请留言讨论,此处写博文也是方便自己后续可以直接通过

NoteShare的全文检索功能快速找到。

/**
 * 纯净框架公用的layer方法封装
 */
function LayerTool(){} ;
LayerTool.prototype = {
    maxmin : true,              //默认可以最大化
    shade : 0.3,                //默认的透明度     
    colseTime : 1000 ,            // 关闭弹出框的默认时间 1S
    width : '90%',                 // 默认窗口的宽度
    height : '90%',               // 默认窗口的高度
    /**
     * 在最顶层弹出:默认大小为80%的弹出层,风格为2,支持点击遮罩层关闭
     * @param title 弹出层标题
     * @param url 弹出层url地址
     * @param maxmin 是否支持最大化,true为支持,否则表示不支持;默认支持最大化
     * @param refresh 是否支持关闭后刷新,true为支持,否则表示不支持;默认不支持刷新
     * @param width 弹出框宽度,默认是90%
     * @param height 弹出框高度,默认是90%
     * @param shadeClose 是否支持点击遮罩关闭窗口,默认支持。
     * @author chx
     */
    open : function(title,url,maxmin,refresh,width,height,shadeClose){
        top.layer.open({
              type: 2,
              title: title,
              shadeClose: (null != shadeClose && false == shadeClose) ? false : true,
              shade: 0.3,
              area: [(null == width || "" == width) ? '90%' : width, (null == height || "" == height) ? '90%' : height],
              maxmin: (null != maxmin && false == maxmin) ? false : true,
              content: url,
              end: function(){
                  if(refresh){
                      // 层销毁后触发的回调
                      operate('query');
                  }
              }
            });
    },
    /**
     * 在最顶层弹出:默认大小为80%的弹出层,风格为2,支持点击遮罩层关闭
     * @param title 弹出层标题
     * @param url 弹出层url地址
     * @param maxmin 是否支持最大化,true为支持,否则表示不支持;默认支持最大化
     * @param refresh 是否支持关闭后刷新,true为支持,否则表示不支持;默认不支持刷新
     * @author chx
     */
    edit : function(title,url,maxmin,refresh){
        top.layer.open({
          type: 2,
          title: title,
          //shadeClose: true,---编辑页面不支持点击遮罩关闭,以免误操作导致数据需要重新录入
          shade: 0.3,
          area: ['90%', '90%'],
          maxmin: (null != maxmin && false == maxmin) ? false : true,
          content: url,
          end: function(){
              if(refresh){
                  // 层销毁后触发的回调
                  operate('query');
              }
          }
        });
    },
    /**
     * 在最顶层弹出:默认大小为80%的弹出层,风格为2,支持点击遮罩层关闭
     * @param title 弹出层标题
     * @param url 弹出层url地址
     * @param maxmin 是否支持最大化,true为支持,否则表示不支持;默认支持最大化
     * @param refresh 是否支持关闭后刷新,true为支持,否则表示不支持;默认不支持刷新
     * @author chx
     */
    show : function(title,url,maxmin,refresh){
        top.layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            maxmin: (null != maxmin && false == maxmin) ? false : true,
            content: url,
            end: function(){
                if(refresh){
                    // 层销毁后触发的回调
                    operate('query');
                }
            }
        });
    },
    /**
     * 根据组件删除表数据
     * params 参数规则例如:&TABLE=DEMO&XH=1
     * refresh:refresh 是否支持删除后刷新,true为支持,否则表示不支持;默认支持刷新
     */
    del : function(params,refresh){
        if(!ctx){
            console.info("layerTool-del:ctx未定义!");
            return false;
        }
        //删除记录
        LayerTool.showConfirm("确认删除?",function(){
            var delUrl = ctx + '/pages/platform/config/ajax.jsp?method=ajaxDelete&' + params;
            $.ajax({
                url:  delUrl,
                type: 'POST',
                async: false,
                dataType: 'text',
                success : function(data){
                    data = eval("("  + data + ")");
                    if(data.result == 'success'){
                        LayerTool.showSucMsg("删除成功!",function(){
                            if(!refresh || "false" != refresh){
                                operate('query');
                            }
                        });
                    }else{
                        LayerTool.showErrMsg(data.msg);
                    }
                },
                error: function(){
                    LayerTool.showErrMsg('删除请求失败,请确定传入的参数是否正确!');
                    return false;    
                }
            });
        },function(){});
    },
    /**
     * 公用的关闭顶层弹出的对话框方法
     * @param floors : 层数(层数计算方法:从弹出框开始计算(弹出框为第一层也就是起始层)到关闭按钮(关闭按钮当前层)的层数。默认是只有一层)
     *                 例如:加入只是简单的弹出一层即open一个url,则floors为1(默认值),如果open弹出框的url中嵌入了iframe而关闭按钮在iframe中则floors为2。
     *                 注意:目前只支持最大3层。如有大于3层的请自行修改方法。
     * @author chx
     */
    closeTopLayer : function(floors){
        try{
            //获取layer索引
            var index = null;
            if(!floors || 2 > floors){
                //测试通过
                index = top.layer.getFrameIndex(window.name);
            }else if(2 == floors){
                //测试通过
                index = top.layer.getFrameIndex(parent.window.name);
            }else if(3 == floors){
                //未经过测试
                index = top.layer.getFrameIndex(parent.parent.window.name);
            }
            //关闭弹出框
            top.layer.close(index);
        }catch (e) {
            showErrMsg('见到我不要惊慌,这只是一个小小的bug(closeTopLayer方法异常,),你可以将问题截图给管理员处理!');
        }
    },
    /**
     * @param msg 提示信息
     */
    showErrMsg : function(msg){
        top.layer.msg(msg,{icon: 2,time:2000,shade:0.0001,shadeClose:true});
    },
    /**
     * @param msg 提示信息
     * @param callback 回调函数
     * @author chx
     */
    showSucMsg : function(msg,callback){
        var length = arguments.length ;   //  实际传入参数的长度
        if(!msg) msg = "操作成功" ;
        if(length==1)
            top.layer.msg(msg,{icon: 1,time:2000,shade:0.0001,shadeClose:true});
        else
            top.layer.msg(msg,{icon: 1,time:2000,shade:0.0001,shadeClose:true},callback);
    },
    /**
     * @param msg 提示信息;默认是!提示图标
     * @param configparams 回调函数例如:{icon: 1}
     * @param callback 回调函数
     */
    alert : function(msg,configparams,callback){
        if(2 == arguments.length){
            if(typeof(configparams) != 'undefined'){
                configparams = {icon: 8};
            }
            top.layer.alert(msg,configparams);
        }else if(3 == arguments.length){
            if(typeof(configparams) != 'undefined'){
                configparams = {icon: 8};
            }
            top.layer.alert(msg,configparams,callback);
        }else{
            top.layer.alert(msg,{icon: 8},callback);
        }
    },
    /**
     * 加载提示
     * 返回layer索引
     */
    showLoad : function(){
        return top.layer.load();
    },
    /**
     * @param content 提示信息
     * @param yesFunction 确认后调用的回调函数
     * @param noFunction 否定后调用的回调函数
     * @author chx
     */
    showConfirm : function(content,yesFunction,noFunction){
        return top.layer.confirm(content,{
            btn: ['确定', '取消'],
            icon : 3,
            title:'提示'
        },yesFunction,noFunction);
    }
};
var LayerTool = new LayerTool();


浏览 607 评论 0 赞 0 砸 0 标签: layer 工具
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款