jquery easyui 等待特效 js+css实现

最新推荐文章于 2024-02-04 15:50:30 发布

红鲜森

最新推荐文章于 2024-02-04 15:50:30 发布

阅读量574

点赞数

分类专栏：技术交流我的作品

本文链接：https://blog.csdn.net/zinechina/article/details/103236304

版权

技术交流同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

我的作品

4 篇文章 0 订阅

订阅专栏

先看效果图：

1、引入easyui所需要的js和css

   <link href="plugins/easyui1_7_0/themes/default/easyui.css" rel="stylesheet" />
    <link href="plugins/easyui1_7_0/themes/icon.css" rel="stylesheet" />
     <script src="plugins/easyui1_7_0/jquery.min.js"></script>
    <script src="plugins/easyui1_7_0/jquery.easyui.min.js"></script>
    <script src="plugins/easyui1_7_0/locale/easyui-lang-zh_CN.js"></script>

2、编写等待的css动画特效

这段特效是在网上找到的

.loading{   
     width: 80px;   
     height: 40px;   
     margin: 0 auto;   
     margin-top:10px;   
 }   
 .loading span{   
     display: inline-block;   
     width: 8px;   
     height: 100%;   
     border-radius: 4px;   
     background: lightgreen;   
     -webkit-animation: load 1s ease infinite;   
 }   

 @-webkit-keyframes load{   
     0%,100%{   
         height: 40px;   
         background: lightgreen;   
     }   
     50%{   
         height: 70px;   
         margin: -15px 0;   
         background: lightblue;   
     }   
 }   
 .loading span:nth-child(2){   
     -webkit-animation-delay:0.2s;   
 }   
 .loading span:nth-child(3){   
     -webkit-animation-delay:0.4s;   
 }   
 .loading span:nth-child(4){   
     -webkit-animation-delay:0.6s;   
 }   
 .loading span:nth-child(5){   
     -webkit-animation-delay:0.8s;   
 }

3、编写JS

3.1写一个函数通过时间获得随机数，用来作为生成的div的ID

const now = new Date();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        return "eloading_"+now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 23 + 100)).toString();

3.2生成html

因为用到了easyui的window，因此需要在最外层给一个div class为easyui-window，并根据easyui的文档设置title等window相关option

window内是一个class为content的div，content里面放加载动画效果，加载中的动画结构是一个class为loading的div，里面放4个span即可

window需要隐藏关闭按钮、边框、头部标题栏

所以option为

{collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true}

nohead为不显示头部标题栏，closable：false不显示关闭按钮 modal:true显示遮罩层（其他部分不能被点击）border:false 隐藏边框

直接上代码

let html = '<div id="'+loadId+'" class="easyui-window" title="数据正在加载中"  data-options="collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true" style="width: 300px; height: auto; padding: 10px;background: rgba(255, 255, 255,0.8)">';
        html+='<div class="content" style="width:100%;">';
        html+='<div class="loading" style="margin-left: 110px; margin-top: 20px;">\n<span></span>\n<span></span>\n<span></span>\n<span></span>\n<span></span></div>';
        html+='<div style="margin-top:15px;text-align:center;color:red;font-size:10px;">'+text+'</div></div></div>';

详情参阅easyui的window 。

3.3上面的html添加到<body>节点里面

 $("body").append(html);

3.4显示加载中提示动画

用dialog的open即可显示

$("#"+你的id).dialog('open');

3.5 加载完成关闭提示动画

$('#'+你的id).dialog('close');

3.6销毁

为了不让页面很累赘，对刚才生成的弹出层节点进行销毁

$("#"+this.id).parent().next(".window-shadow").next(".window-mask").remove();
$("#"+this.id).parent().next(".window-shadow").remove();
$("#"+this.id).parent().remove();

如此，全部完成。

我把它写成了一个插件，以下是全部js代码：

var easyloading = {
    init: function (text) {
        let loadingobj={};
        if (text == undefined || text == null) {
            text = "正在拼了命的为您加载中";
        }
        const loadId=easyloading.getid();
        let html = '<div id="'+loadId+'" class="easyui-window" title="数据正在加载中"  data-options="collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true" style="width: 300px; height: auto; padding: 10px;background: rgba(255, 255, 255,0.8)">';
        html+='<div class="content" style="width:100%;">';
        html+='<div class="loading" style="margin-left: 110px; margin-top: 20px;">\n<span></span>\n<span></span>\n<span></span>\n<span></span>\n<span></span></div>';
        html+='<div style="margin-top:15px;text-align:center;color:red;font-size:10px;">'+text+'</div></div></div>';
        $("body").append(html);
        loadingobj.id=loadId;
        loadingobj.init=false;
        loadingobj.show=function(){
            console.log(this.id);
            if(!this.init){
                $('#'+this.id).window({collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true});
                this.init=true;
            }
            $('#'+this.id).dialog('open');
        };
        loadingobj.close=function(){
            $('#'+this.id).dialog('close');
        }
        loadingobj.dispose=function(){
            $("#"+this.id).parent().next(".window-shadow").next(".window-mask").remove();
            $("#"+this.id).parent().next(".window-shadow").remove();
            $("#"+this.id).parent().remove();
            this.init=false;
            return undefined;
        }
        return loadingobj;
    },
    getid:function(){
        const now = new Date();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        return "eloading_"+now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 23 + 100)).toString();
    }
};

完整的demo源代码：

https://download.csdn.net/download/zinechina/11996395

红鲜森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery easyui 等待特效 js+css实现

先看效果图：1、引入easyui所需要的js和css <link href="plugins/easyui1_7_0/themes/default/easyui.css" rel="stylesheet" /> <link href="plugins/easyui1_7_0/themes/icon.css" rel="stylesheet" />...
复制链接

扫一扫