弹出层框架layer快速使用

1、将layer整个放入工程内。

2、文件内引入layer.js，

3、直接就可以使用了。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>${systemName}</title>

<%@ include file="/WEB-INF/pages/public/common.jspf"%>

<link rel="stylesheet" type="text/css" href="${basePath}/scripts/jQuery/plugins/uploadify/uploadify.css" />

<script type="text/javascript" src="${basePath}/scripts/other/jquery.uploadPreview.js"></script>

<script type="text/javascript" src="${basePath}/scripts/other/ajaxfileupload.js"></script>

<script type="text/javascript" src="${basePath}/scripts/layer/layer.js"></script>

<script type="text/javascript" src="${basePath}/scripts/jQuery/plugins/uploadify/jquery.uploadify.min.js?random=<%=Math.random() %>"></script>

<script type="text/javascript">

//提示信息

function layerMsg(str){

    layer.open({

          title: false,

          content: '<div style="text-align:center;font-weight:bolder;">'+str+'</div>',

          btnAlign: 'c',

          offset:"t",

          closeBtn: 0,

          skin: 'layui-layer-molv'

        });

}

$(function() {

         //提交表单

        $("#submitButton").bind("click",function(){

             var index = $("#upload_zipfile").val().lastIndexOf(".")+1;

            var ext = $("#upload_zipfile").val().substr(index).toUpperCase();//获得文件后缀名

             var str = $("#upload_zipfile").val();

             if(str==""){

                 showAlertDialog("<s:text name='cems.public.messageTip'/>",'文件不能为空！');

                 return false;

             }

            if(ext!="ZIP"){

                showAlertDialog("<s:text name='cems.public.messageTip'/>",'<s:text name="cems.soft.xmlfileTypeError"></s:text>');

                return false;

            }

            if($("#addForm").valid()){

                $(this).attr("disabled","disabled");

                wait("","<s:text name='cems.soft.progress.fileUploading'></s:text>");//遮罩提示:文件正在上传中

                $.ajaxFileUpload({

                     url:'${basePath}/mgr/resourceAction_uploadAuthFile.do',

                    fileElementId: 'upload_zipfile',

                    dataType:'json',

                    success:function(obj){

                        removeWait();  //移除等待效果

                        if(obj.result == "success"){

                            confirm();

                         }else{

                            $("#submitButton").removeAttr("disabled");

                            /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/

                            layerMsg('<s:text name="cems.public.msgFail"></s:text>');

                         }

                      }

                });

            }

            return false;

    }); 

    $("#defaultButton").bind("click",function(){

        $.messager.confirm('提示', '是否恢复默认授权信息?', function(r){

            if (r) {

                $(this).attr("disabled","disabled");

                wait("","<s:text name='cems.soft.progress.handling'></s:text>");//遮罩提示

                $.doAjax({

                      url:'${basePath}/mgr/resourceAction_restore.do',

                      async:true,

                    success:function(responseText){

                        removeWait();  //移除等待效果

                        var obj = eval("(" + responseText + ")");

                        if(obj.result == "success"){

                            $("#submitButton").removeAttr("disabled");

                            if (obj.resResult == "success" || obj.polResult == "success") {

                                /*showMsg("",'<s:text name="cems.public.msgSuccess"></s:text>',true);*/

                                layerMsg('<s:text name="cems.public.msgSuccess"></s:text>');

                            }else if(obj.resResult == "resnull" && obj.polResult == "polnull"){

                                /*showMsg("",'导入授权文件为空！',true);*/

                                layerMsg('导入授权文件为空！');

                            }

                        }else{

                            $("#submitButton").removeAttr("disabled");

                            /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/

                            layerMsg('<s:text name="cems.public.msgFail"></s:text>');

                        }

                     }

                });

            }

        });

    });

});

function confirm() {

    $.messager.confirm('提示', '上传成功，是否更新授权信息到数据库?', function(r){

        if (r){

            $(this).attr("disabled","disabled");

            wait("","<s:text name='cems.soft.progress.handling'></s:text>");//遮罩提示

            $.doAjax({

                  url:'${basePath}/mgr/resourceAction_update.do',

                  async:true,

                success:function(responseText){

                    removeWait();  //移除等待效果

                    var obj = eval("(" + responseText + ")");

                    if(obj.result == "success"){

                        $("#submitButton").removeAttr("disabled");

                        if (obj.resResult == "success" || obj.polResult == "success") {

                            /*showMsg("",'<s:text name="cems.public.msgSuccess"></s:text>',true);*/

                            layerMsg('<s:text name="cems.public.msgSuccess"></s:text>');

                        }else if(obj.resResult == "resnull" && obj.polResult == "polnull"){

                            /*showMsg("",'导入授权文件为空！',true);*/

                            layerMsg('导入授权文件为空！');

                        }else if(obj.resResult == "crc" || obj.polResult == "pcrc"){

                            /*showMsg("",'导入授权文件与原文件相同！',true);*/

                            layerMsg('导入授权文件与原文件相同！');

                        }

                    }else{

                        $("#submitButton").removeAttr("disabled");

                        /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/

                        layerMsg('<s:text name="cems.public.msgFail"></s:text>');

                    }

                 }

            });

        }

    });

}

</script>

</head>

<body>

    <center>

        <div style="height: 30px"></div>

        <div>

            <img src="${basePath}/images/tip.png" align="absmiddle"></img>&nbsp;

            <span style="font-weight: bold; color: #FF4500; font-size: 14px;"><s:text name="注意：请选择ZIP格式授权文件压缩包"></s:text></span>

        </div>

        <div style="height: 30px"></div>

        <div style="width: 548px; height: 85px; background-color: #EAEAEA; border: 1px solid #DBDBDB;">

                <form id="addForm" class="ajaxForm" method="post">

                    <table id="itemTable" class="itemTable">

                         <tr>

                             <td class="leftAlign"><s:text name="cems.public.authInput"></s:text></td>

                             <td class="rightAlign">

                             <input type="text" name="txt" readonly="readonly" style="width: 200px;" class="inputText"/>

                                    <input type="button" value='<s:text name="cems.chooseFile"></s:text>' size="30" onclick="upload_zipfile.click()" style="width: 73px;" class="inputText" />

                                    <input type="file" id="upload_zipfile" onchange="txt.value=this.value" accept=".zip" name="zipfile" style="position:absolute;

                                           filter:alpha(opacity=0);-moz-opacity:0;opacity:0;left: 120px; height: 25px;width: 200px;"/>

                            <label class="requiredLable">*</label>

                             </td>

                             <td class="leftAlign"></td>

                        </tr>

                    </table>

                </form>

         </div>

         <div style="height: 30px"></div>

         <div class="windowButtonDiv">

                 <button class="buttonClass" id="defaultButton"><span><img src="${basePath}/styles/images/icons/import.png" width="14px" height="14px"></img></span><span><s:text name="cems.default"></s:text></span></button>&nbsp;

                <button class="buttonClass" id="submitButton">

                    <span><img src="${basePath}/styles/images/icons/ok.png"

                        width="14px" height="14px"></img></span><span><s:text

                            name="cems.ok"></s:text></span>

                </button>

                &nbsp;

                <button class="buttonClass" id="closeWindow">

                    <span><img src="${basePath}/styles/images/icons/cancel.png"

                        width="14px" height="14px"></img></span><span><s:text

                            name="cems.cancel"></s:text></span>

                </button>

                &nbsp;

            </div>

</div>

    </center>

</body>

</html>

弹出层框架layer快速使用的更多相关文章

前端弹出层框架layer
http://www.layui.com/doc/modules/layer.html#layer.confirm
Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
layer弹出层框架alert与msg详解
ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...
Layui 弹出层组件——layer
layer是作为Layui[经典模块化前端框架]的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护. 基础参数: 基础参数主要指调用方法时用到的配置项,如:layer.open({ ...
html/css/js-layer弹出层的初次使用
学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...
LayUI之弹出层
1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...
layer：web弹出层解决方案
layer:web弹出层解决方案一.总结一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...
弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
layer弹出层全屏及关闭
一.首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二.全屏调用以下代码 v ...

随机推荐

python3 开发面试题（collections中的Counter）6.7
''' 编写Python脚本,分析xx.log文件,按域名统计访问次数 xx.log文件内容如下: https://www.sogo.com/ale.html https://www.qq.com/3 ...
HDU 4818 RP problem （高斯消元， 2013年长春区域赛F题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4818 深深地补一个坑~~~ 现场赛坑在这题了,TAT.... 今天把代码改了下,过掉了,TAT 很明显 ...
ARM LDR/STR, LDM/STM 指令
这里比较下容易混淆的四条指令,已经在这4条指令的混淆上花费了很多精力,现在做个小结,LDR,STR,LDM,STM这四条指令, 关于LDM和STM的说明,见另外一个说明文件,说明了这两个文件用于栈操作 ...
Temporary ASP.Net Files探究
了解.net平台的兄弟都知道,.net也是采用动态编译的也就是说我们常说的build生成的dll只是中间代码而在web第一次请求的时候才是真正意义上的编译生成二进制代码这也就是为什么刚编译完第一次打开 ...
在ASP.NET MVC控制器中获取链接中的路由数据
在ASP.NET MVC中,在链接中附加路由数据有2种方式.一种是把路由数据放在匿名对象中传递: <a href="@Url.Action("GetRouteData&quo ...
在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建
通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅 ...
CentOS 安装 Jenkins
原文:https://www.sunjianhua.cn/archives/centos-jenkins.html 1.更换源 mv /etc/yum.repos.d/CentOS-Base.repo ...
UIImageView 详解
1.//设置圆角 userhead.layer.masksToBounds = YES; userhead.layer.cornerRadius = 6.0; userhead.layer.bord ...
iOS6新特征：UICollectionView介绍-非常棒－转
传送门:http://www.devdiv.com/forum.php?mod=viewthread&tid=128378
在Android.mk文件中输出打印消息
http://www.xuebuyuan.com/1947880.html 在进行Android NDK的开发当中有时想看看Android.mk文件当中某个变量的值,可以再Android.mk文件当中 ...

弹出层框架layer快速使用

弹出层框架layer快速使用的更多相关文章

随机推荐

热门专题