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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
JS array数组检测方式解析
May 19 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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编写注册后Email激活验证的实例代码
2013/03/11 PHP
基于php缓存的详解
2013/05/15 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP对象实例化单例方法
2017/01/19 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js数组操作常用方法
2014/05/08 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
详解python算法之冒泡排序
2019/03/05 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
培训班开班主持词
2015/07/02 职场文书
理解python中装饰器的作用
2021/07/21 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis