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

随机推荐

闲话函数式变成与OOP
函数式编程扫盲篇推薦參考文獻地址:http://byvoid.github.io/slides/apio-fp/index.html 1. 概论在过去的近十年的时间里,面向对象编程大行其道.以至于 ...
在fork的项目里同步别人新增分支的方法
# 1.将项目B clone 到本地 git clone -b master 项目B的git地址 # 2.将项目A的git地址,添加至本地的remote git remote add upstream ...
Java使用独立数据库连接池（DBCP为例）
目前,绝大多数的软件系统都会使用数据库,而在软件构建起来之后,访问数据库又成为软件系统性能的短板(I/O操作).一般来说一次访问数据库就需要一个数据库连接.而每次创建数据库连接都需要访问,分配空闲资源 ...
android.os.handler(转)
android.os.handler相关知识整理 Handler在android里负责发送和处理消息.它的主要用途有: 1)按计划发送消息或执行某个Runnanble(使用POST方法): 2)从其他 ...
使用WindowsAPICodePack实现翻译功能
仅限于以下几种语言间的翻译: 在我的另一篇博文<图片批量压缩>中,有介绍WindowsAPICodePack库,该库是微软提供的一套基于Win7及以上版本操作系统的系统库,可以帮助我们完成 ...
TIMER门控模式控制PWM输出长度
TIMER门控模式控制PWM输出长度参照一些网友代码做了些修改,由TIM4来控制TIM2的PWM输出长度, 采用主从的门控模式,即TIM4输出高时候TIM2使能输出 //TIM2 PWM输出,由TI ...
《Go语言实战》摘录：6.5 并发 - 通道
6.5 通道
多用StringBuilder,少用字符串拼接
在C#中,在处理字符串拼接的时候,使用StringBuilder的效率会比硬拼接字符串高很多.到底有多高,如下: static void Main(string[] args) { string st ...
Xcode 5.1.1 与 Xcode 6.0.1 的共存之路（建议大家在升级Xcode 6.0.1 的时候保留Xcode 5.1.1）
最近升级了Xcode 6.0.1 与原有项目有不少冲突.建议大家谨慎升级,同时做好备份.二者共存推荐如下帖子. http://jingyan.baidu.com/article/1612d500457 ...
ASIHTTPRequestErrorDomain Code=5
ASIHttpRequest解析带空格的URL时出错!!!(已解决) 用的是post请求 URL 地址是: http://111.234.51.56/login_member.pl?time=201 ...

弹出层框架layer快速使用

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

随机推荐

热门专题