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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 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随机数生成代码与使用实例分析
2011/04/08 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python3.4实现邮件发送功能
2018/05/28 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python os.rename实例用法详解
2020/12/06 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
事业单位辞职信范文
2014/01/19 职场文书
八年级数学教学反思
2014/01/31 职场文书
股权转让协议书范本
2014/04/12 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
父亲节寄语大全
2015/02/27 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis