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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
一看就懂得Python的math模块
2018/10/21 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Python下载的11种姿势(小结)
2020/11/18 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
2014年民主评议党员个人总结
2014/09/24 职场文书
稽核岗位职责
2015/02/10 职场文书
装修安全责任协议书
2016/03/22 职场文书
javaScript Array api梳理
2021/03/31 Javascript