jquery等待效果示例


Posted in Javascript onMay 01, 2014

实现查询等待:正在查询中,请稍后...

jquery等待效果示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 正在查询,请稍等... </title>
<style type="text/css">
.query_hint{
 border:5px solid #939393;
 width:250px;
 height:50px;
 line-height:55px;
 padding:0 20px;
 position:absolute;
 left:50%;
 margin-left:-140px;
 top:50%;
 margin-top:-40px;
 font-size:15px;
 color:#333;
 font-weight:bold;
 text-align:center;
 background-color:#f9f9f9;
}
.query_hint img{position:relative;top:10px;left:-8px;}
</style>
 </head>
 <body>
  <div id="query_hint" class="query_hint">
   <img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" />正在查询,请稍等...
  </div>
 </body>
</html>

jquery代码

<div id="query_hint" class="query_hint">
    <img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" />正在查询,请稍等...
</div>

<script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//页面加载完成之后去掉Loading
$(document).ready(function(){
    parent.frames[0].queryHintCallback("query_hint");
});
/**
 * @description  * 显示查询等待层
 * @param query_hint
 */
function show_query_hint(query_hint){
    var query_hint = document.getElementById(query_hint);
    query_hint.style.display="block";
}
/**
 * @description 查询结果回调函数
 * @param query_hint 要隐藏的提示层id
 */
function queryHintCallback(query_hint){
    var query_hint = document.getElementById(query_hint);
    query_hint.style.display="none";
}
</script>
Javascript 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
js实现checkbox全选和反选示例
May 01 #Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 #Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 #Javascript
js获取ajax返回值代码
Apr 30 #Javascript
You might like
php中计算时间差的几种方法
2009/12/31 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
js判断密码强度的方法
2020/03/18 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
python 字典(dict)按键和值排序
2016/06/28 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python面向对象 反射原理解析
2019/08/12 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
座谈会主持词
2014/03/20 职场文书
质量提升方案
2014/06/16 职场文书
欢迎家长标语
2014/10/08 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
素质拓展训练感想
2015/08/07 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python django中如何使用restful框架
2021/06/23 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Python学习之os包使用教程详解
2022/03/21 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers
box-shadow单边阴影的实现
2023/05/21 HTML / CSS