一个非常不错的layer JavaScript插件的使用

一个非常不错的 layer JavaScript 插件的使用–layUI

01.简介

在学过html,css,JavaScript之后，现在也越来越喜欢做出一些比较炫酷的东西，然而无奈自身能力有限，最近自己做一个了小小的javaweb系统，利用java去调用python，之前的博客也有源码，为了做进一步的改进提升系统的用户体验，并再次基础上做了进一步的改进，优化了前端与后端，在后端处理的情况下，前端跳出一个layer使得前端不能动，待后端处理完结束之后回自动显示处理的结果。这是我使用的layUI中的lay组件。
注：本项目使用的java与前端的结合，并使用了bootstrap框架对此进行了布局

02.使用效果预演

这是进行处理等状态：

由于后端优化的不好，可能处理的速度有点慢。这也是使用这个layer的目的了。

03.layer的使用简介

首先在自己创建的项目下导入layer这个文件夹

当然这个文件下是有很多其他文件的，例如css，js，图片等，只有在项目中引入layer.js即可，需要说明的是：这个插件是需要jQuery1.8版本支持的，也就是说，在使用这个插件之前，你需把这个jQuery1.8版本的插件也要引入项目中。

04.代码简介

        <script type="text/javascript">
        /* 在页面加载完成后使用*/
            $(function(){
            /*一个定时函数，获取时间的 */
                setInterval(showtime,1000);
                /* 函数处理，使用的是异步请求ajax技术*/
                $("#sbtn").click(function(){
                /* 创建一个layer load对象*/
                    var ii=layer.load();
                    /*ajax进行请求 */
                    $.ajax({
                    /*请求方式 */
                        type:'POST',
                        /*请求的地址 */
                        url:'${pageContext.request.getContextPath()}/nlp',
                        /* 请求的参数和内容*/
                        data:{text:$("#textareaCode").val()},
                        /* 数据格式为json*/
                        dataType:'json',
                        /* 请求成功后，返回结果result，写一个函数进行处理*/
                        success:function(result){
                            //清空之前的内容，避免数据都叠加在一起
                            $("#rview").empty();
                            /* 给指定区域写内容，也就是要显示的地方*/ 
                            $("#rview").prepend(result); 
                            /*为标签写属性，这里我使用的是java的数据流方式传递图片到页面，类似于验证码原理 */
                            $("#pic").attr("src","${pageContext.request.contextPath }/wc");
                            /* 处理结束后关闭遮罩层*/
                            layer.close(ii);
                        }
                    });

                });
            });
            function showtime(){
                var t=new Date();
                var weekday=new Array(7);
                weekday[0]="周日";
                weekday[1]="周一";
                weekday[2]="周二";
                weekday[3]="周三";
                weekday[4]="周四";
                weekday[5]="周五";
                weekday[6]="周六";
                document.getElementById("time").innerHTML="当前时间："+t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+"日"
                +weekday[t.getDay()]+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
            }
        </script>

当然我这个代码还有获取本地时间的显示模块，读者可以忽略。
本项目的源码，将会在项目中的各个难点讲解完之后附上百度云链接。layer插件下载地址：http://layer.layui.com/
这里有很多有趣的功能，有兴趣的可以做进一步的探索。