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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
javascript操作数组详解
Dec 17 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
Web程序工作原理详解
2014/12/25 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Javascript MD4
2006/12/20 Javascript
javascript 写类方式之一
2009/07/05 Javascript
js常用排序实现代码
2010/12/28 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
用JS实现选项卡
2020/03/23 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
深入理解Python对Json的解析
2017/02/14 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
自考毕业自我鉴定范文
2013/10/27 职场文书
商务会议邀请函
2014/01/09 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
村委会贫困证明范文
2014/09/21 职场文书
水电施工员岗位职责
2015/04/11 职场文书
讲座新闻稿
2015/07/18 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang