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 toFixed() 方法
Apr 15 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 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新手上路(六)
2006/10/09 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python中标准模块importlib详解
2017/04/16 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
委托证明的格式
2014/01/10 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书