等待层

        /**
         * 等待层
         */
        setWaitPanel:function(){
            if(document.getElementById("loader_container")!=null){
                return;
            }

            var sWidth = document.body.offsetWidth;
            var sHeight = document.body.scrollHeight;
            panel = document.createElement("div");
            panel.setAttribute(‘id‘, ‘bgDiv‘);
            panel.setAttribute(‘class‘, ‘msgCover‘);
            panel.style.width = sWidth + "px";
            panel.style.height = sHeight + "px";
            document.body.appendChild(panel);

            obj1 = document.createElement("div");
            obj1.setAttribute("id","loader_container");

            var obj2 = document.createElement("div");
            obj2.setAttribute("id", "loader");
            document.body.appendChild(obj1);
            document.getElementById("loader_container").appendChild(obj2);

            var obj3 = document.createElement("div");
            obj3.setAttribute("id","load_img");
            document.getElementById("loader").appendChild(obj3);

            var obj4 = document.createElement("div");
            obj4.setAttribute("id","load_msg");
            obj4.innerHTML = "载入中...";
            document.getElementById("loader").appendChild(obj4);
        },

        /**
         * 清除等待层
         */
        clearWaitPanel:function(){
            document.body.removeChild(panel);
            document.body.removeChild(obj1);
        }
    };
=================================
提交时设置等待层,显示数据后清除等待层
.msgCover {
    background: none repeat scroll 0 0 #777;
    opacity: 0.65;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}
#loader_container {
    text-align: center;
    position: absolute;
    top: 200px;
    width: 100%;
    left: 0;
    z-index: 10001;
}
#loader {
    font-size: 11.5px;
    background-color: #FFFFFF;
    padding: 10px 0;
    margin: 0 auto;
    height: 18px;
    width: 120px;
    border: 1px solid #5a667b;
    z-index: 2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#load_img {
    background-image: url("../images/wait.gif");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    float: left;
    height: 22px;
    margin: 2px 0 0 10px;
    width: 23px;
}

#load_msg {
    float: left;
    margin: 3px 0;
}

============用法=============
提交后设置等待层    SA.setWaitPanel();
数据响应返回后清除等待层    SA.clearWaitPanel();
时间: 2024-07-30 23:17:40

等待层的相关文章

video.js支持m3u8格式直播

为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化体验 核心代码: <!DOCTYPE html> <html> <head> <title>videojs支持hls直播实例</title> <link href=".

注册页面的一些记录

注册页面是大多数网站必备的页面,所以很有必要对自己的注册页面做些精心的设计.下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的JS文件. 注册的展示页面 简单的逻辑 通过firebug查看调用的JS文件 一.给每个输入框写下说明 在用户看到这个输入框的时候,就能非常清晰的明白这个输入框是做啥用的,最大限度的降低他们产生疑惑的可能性.我们需要假设用户毫不了解注册需要输入的内容,随后给他们足够的信息以便帮助他们理解. 二.小图标icon Icon

使用MEF实现通用参数设置

通用后台管理系统必备功能模块包含日志管理,权限管理,数据字典,参数配置等功能.参数设置主要用于设置系统运行所需的一些基础性配置项,比如redis缓存,mq消息队列,系统版本等信息.好的参数设置需要达到以下几点1.使用简单  2.功能强大,方便拓展 3.界面美观.本篇将带你实现通用参数设置,在阅读之前你需要了解的知识,ASP.NET MVC,Entity Framework,MEF.在线预览地址:http://config.myscloud.cn 阅读目录 添加配置项及使用 实现思路 关键代码解析

超详细的php用户注册页面填写信息完整实例(附源码)

这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要对自己的注册页面做些精心的设计.下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的JS文件. 一.给每个输入框写下说明 在用户看到这个输入框的时候,就能非常清晰的明白这个输入框是做啥用的,最大限度的降低他们产生疑惑的可能性.我们需要假设用户毫不了

Socket层实现系列 — 睡眠驱动的同步等待

主要内容:Socket的同步等待机制,connect和accept等待的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 概述 socket上定义了几个IO事件:状态改变事件.有数据可读事件.有发送缓存可写事件.有IO错误事件. 对于这些事件,socket中分别定义了相应的事件处理函数,也称回调函数. Socket I/O事件的处理过程中,要使用到sock上的两个队列:等待队列和异步通知队列,这两个队列中 都保存着等待该Socket I/O事件

Socket层实现系列 — 信号驱动的异步等待

主要内容:Socket的异步通知机制. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 概述 socket上定义了几个IO事件:状态改变事件.有数据可读事件.有发送缓存可写事件.有IO错误事件. 对于这些事件,socket中分别定义了相应的事件处理函数,也称回调函数. Socket I/O事件的处理过程中,要使用到sock上的两个队列:等待队列和异步通知队列,这两个队列中 都保存着等待该Socket I/O事件的进程. Q:为什么要使用两个队列,等待

页面加载时让其显示笼罩层与加载等待图片

页面加载时让其显示笼罩层与加载等待图片(结局比较完美,过程很坎坷,所以一定总结整理下,备用): 用了ajax异步,是因为js内容不能即时的显示出来,因为js是单线程,要把队列中的任务执行完后才会执行刚才对js的处理 要用beforeSend,complete的时候必须要用ajax异步 beforeSend: function () {},//程序一开始便会执行该函数,使用该方法必须使用异步ajax complete: function () {},//complete在success或error

easyui的页面等待提示层,即mask

/* * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil.mask('其它提示文字...'); */ var MaskUtil = (function(){ var $mask,$maskMsg; var defMsg = '正在处理,请稍待...'; function init(){ if(!$mask){ $mask = $("<div class=\"datagrid-mask mymask\

弹出层罩子html(上传照片弹出请等待后面的代码不能修改)

一,效果 二,素材 三,代码 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no"> 6 <title>自适应居中加载点击遮罩效果