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.ajax传递中文参数的解决方法
May 28 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
js自带函数备忘 数组
2006/12/29 Javascript
Display SQL Server Login Mode
2007/06/21 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python实现发送邮件功能
2017/07/22 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
安全生产责任书
2014/03/12 职场文书
个人投资计划书
2014/05/01 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
医院合作意向书范本
2015/05/08 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python