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

随机推荐

Codeforces.997C.Sky Full of Stars(容斥计数)
题目链接那场完整的Div2(Div1 ABC)在这儿.. $Description$ 给定$n(n\leq 10^6)$,用三种颜色染有$n\times n$个格子的矩形,求至少有一行或 ...
.babelrc文件的一些简单的配置
首先现在根目录先生存.babelrc文件这个文件是用来设置转码的规则和插件的如果想使用es6语法,必须安装插件 npm install babel-preset-es2015 { "pr ...
web网页上面调用qq
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2812415198&site=q ...
AE开发中关于 “无法嵌入互操作类型.........请改用适用的接口”问题的解决方法
最近开始使用VS2010,在引用COM组件的时候,出现了“无法嵌入互操作类型……,请改用适用的接口”的错误提示. 查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌 ...
Nginx FastCGI的运行原理
http://www.cnblogs.com/yinshoucheng-golden/p/6474034.html
防止shell脚本长时间执行导致ssh超时
在一些对安全性要求较高的场景下.ssh的超时时间是管理员预先设置好的,在闲置一段时间后ssh连接会自己主动断开. 这样的情况下假设通过ssh运行脚本,而脚本运行时间又比較长的话.会导致sshclien ...
Win32动态链接库和MFC 动态链接库
通过使用 DLL,程序可以实现模块化,由相对独立的组件组成.例如,一个计帐程序可以按模块来销售.可以在运行时将各个模块加载到主程序中(如果安装了相应模块).因为模块是彼此独立的,所以程序的加载速度 ...
MySQL子查询慢现象的解决
当你在用explain工具查看sql语句的执行计划时,若select_type 字段中出现“DEPENDENT SUBQUERY”时,你要注意了,你已经掉入了mysql子查询慢的“坑". 相 ...
JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
让DELPHI自带的richedit控件显示图片
让DELPHI自带的richedit控件显示图片 unit RichEx; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichE ...

弹出层框架layer快速使用

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

随机推荐

热门专题