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开发的数独游戏代码
Oct 29 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
小学教研工作制度
2014/01/15 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
高三毕业寄语
2014/04/10 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
大学生见习报告范文
2014/11/03 职场文书
病危通知单
2015/04/17 职场文书
技术入股协议书
2016/03/22 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
如何使用SQL Server语句创建表
2022/04/12 SQL Server