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

随机推荐

开源的在线评测系统——Vakuum
项目地址 http://code.google.com/p/vakuum-oj/ https://github.com/BYVoid/vakuum 简介 Vakuum是一个基于Linux+PHP的在线 ...
【BZOJ-3218】a+b Problem 最小割 + 可持久化线段树
3218: a + b Problem Time Limit: 20 Sec Memory Limit: 40 MBSubmit: 1320 Solved: 498[Submit][Status] ...
centos ssh终端下高亮显示git分支名
#set git branch green=$'\e[1;32m' magenta=$'\e[1;35m' normal_colours=$'\e[m' function find_git_branc ...
Who is YaoGe.(搞笑篇)
耀哥是google的大牛.主持google各种牛逼分布式系统的设计,比方Mapreduce之类的,关于大神的传说,如同春哥一样多,当然,有些传说仅仅有程序猿能明确! 耀哥当初面试Google时.被 ...
javascript: break跳出多重循环以及退出each循环
先来看一个小例子: <html> <body> <script type="text/javascript"> for(j=0;j<2;j ...
libuv
libuv 1. 概述 libuv是一个支持多平台的异步IO库.它主要是为了node.js而开发的,但是也可以用于Luvit, Julia, pyuv及其他软件. 注意:如果您发现了此软件中的错误,那 ...
[CALayer release]: message sent to deallocated instance
遇到此问题时,查看以下类的dealloc方法中是否有过度释放. 可以在release前先判断以下对象是否还存在. -(void)dealloc { if (!m_tableView) [m_table ...
(ios7) 解决代码布局View, ios7 中 subView 高度增加StatusBar20dp的问题，保证Ios6，ios7代码一致
在ios7 布局中,Status Bar 和 ToolBar ,NavigateBar 等都包含在ViewControl的主View中. 这样原来ios6 的View布局整体向上移动了20dp,下面 ...
Android4.1中BinderService的作用
http://blog.csdn.net/lsdmx2016/article/details/8772583 Android4.1 中出现了一个新的类,BinderService,所有的Native ...
浅析c++中virtual关键字
http://blog.csdn.net/djh512/article/details/8973606 1.virtual关键字主要是什么作用? c++中的函数调用默认不适用动态绑定.要触发动态绑定, ...

弹出层框架layer快速使用

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

随机推荐

热门专题