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 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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作的文本留言本的例子(五)
2006/10/09 PHP
在数据量大(超过10万)的情况下
2007/01/15 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python删除特定文件的方法
2015/07/30 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
实践Vim配置python开发环境
2018/07/02 Python
Numpy中的mask的使用
2018/07/21 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
财务管理专业推荐信
2013/11/19 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
继续教育个人总结
2015/03/03 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
戒赌保证书
2015/05/11 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android