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高亮效果的二种实现方法
Sep 14 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
关于Vue中的options选项
Mar 22 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python去除字符串中的换行符
2017/10/11 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
南京某公司笔试题
2013/01/27 面试题
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
心理健康课教学反思
2014/02/13 职场文书
抽奖活动主持词
2014/03/31 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
四十九个javascript小知识实用技巧
2021/11/20 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL