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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS验证不重复验证码
Feb 10 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
ES6字符串的扩展实例
Dec 21 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
基于python绘制科赫雪花
2018/06/22 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python线性插值解析
2020/07/05 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
J2EE包括哪些技术
2016/11/25 面试题
高三语文教学反思
2014/01/15 职场文书
搞笑获奖感言
2014/01/30 职场文书
餐饮营销方案
2014/02/23 职场文书
公司收款委托书范本
2014/09/20 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
Nginx 常用配置
2022/05/15 Servers