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创建命名空间(namespace)的最简实现
Dec 11 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue-router history模式下的微信分享小结
Jul 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
Yii核心验证器api详解
2016/11/23 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
shell程序中如何注释
2012/01/28 面试题
旅游管理毕业生自荐书
2014/02/02 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
地心历险记观后感
2015/06/15 职场文书
通知怎么写?
2019/04/17 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python实现制作销售数据可视化看板详解
2021/11/27 Python