弹出层框架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 ...

随机推荐

LOJ.2863.[IOI2018]组合动作(交互)
题目链接通过两次可以先确定首字母.然后还剩下$n-1$位,之后每一位只有三种可能. 最简单的方法是每次确定一位,通过两次询问显然可以确定.但是只能一次询问. 首字母只会出现一次,即我们可以将串分 ...
QThreadPool线程池的开发使用
QThreadPool+QRunnable线程池与QThread线程两种方式使用的场景不同,QThreadPool+QRunnable线程池主要用于那种不需要一直运行的任务,而QThread主要用于长 ...
js识别用户设备是移动端手机时跳转到手机网站
一.识别到用户的设备是手机等移动端设备时跳转到移动端网站 var mobileAgent = new Array("iphone", "ipod", " ...
VMware安装MikroTik RouterOS chr
简单步骤: 1.官网下载ova镜像 2.导入到vmware即可.
在Windows下通过netsh命令实现端口映射
在Windows环境下,可以通过netsh命令实现简单快速的配置端口映射功能 1. 新增端口映射 netsh interface portproxy add v4tov4 listenport= co ...
How Visual Studio 2012 Avoids Prompts for Source
[原文地址]:http://blogs.msdn.com/b/heaths/archive/2012/07/26/how-visual-studio-2012-avoids-prompts-for-s ...
Context Switching on the Cortex-M3
http://coactionos.com/embedded%20design%20tips/2013/10/09/Tips-Context-Switching-on-the-Cortex-M3/ T ...
java入门学习（十四）运算语句for
循环可用来重复执行一条语句或者含有多条语句的语句块.在大多数程序中都会需要重复执行一块语句. for 循环的基本语法是: for (表达式1:表达式2:表达式3) { 若干语句 } for语句由关键字 ...
WinForm MDIParent如何防止重复打开
DI,全称是多文档界面(Multiple Document Interface),主要应用于基于图形用户界面的系统中.其目的是同时打开和显示多个文档,便于参考和编辑资料. 下面是一个WinForm M ...
skb的两个函数pskb_copy和skb_copy
转自:http://blog.csdn.net/farmwang/article/details/54235252 skb的两个函数pskb_copy和skb_copy 前者仅仅是将sk_buff的结 ...

弹出层框架layer快速使用

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

随机推荐

热门专题