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>

赞 (0)

相关推荐

  • jquery实现加载等待效果示例

    复制代码 代码如下: var dates = this.options.form.getWidgetByName("dates").getValue(); $.ajax({ url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do", data:dates, beforeSend:function() { var h = document.body.clientHeight; $("<d

  • jquery.blockUI.js上传滚动等待效果实现思路及代码

    jquery.blockUI.js上传滚动等待效果实现思路及代码

    请求的url: 复制代码 代码如下: function request(url, onSuccess, paras, method, isAsync, isMask) { $.ajax({type:method,url:url,async:isAsync,data:paras,success:function(request){onSuccess(request,isMask);},error:function(e) {if(isMask) $('#div_mask').unblock();},

  • Js Jquery创建一个弹出层可加载一个页面

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • jquery处理页面弹出层查询数据等待操作实例

    jquery处理页面弹出层查询数据等待操作实例

    本文实例讲述了jquery处理页面弹出层查询数据等待操作.分享给大家供大家参考.具体实现方法如下: $(document).ready(function(){ layer.load(0); //初始化加载 //可选范围(0-9)0表示等返回结果后关闭,1-9表示自动关闭时间(s) }); 当查询结果集返回后,设置关闭等待的样式 function init_page_pro(sdate, pro) { $.post("detail.key", { 'pro' : pro, 'sdate'

  • jquery 弹出层注册页面等(asp.net后台)

    jquery 弹出层注册页面等(asp.net后台)

    [一]需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择. 5:尽力提高用户体验,吸引用户注册. [二]无图无真相. 1:简化后的页面: 2:浮出文字提示和圆角边框: 3:支持民意调查(异步提交) 4:自动检索推荐用户名(测试数据) 5:数据有效性验证 6:日历 7:支持拖拽 8:滑入显示 9:over [三]代码分析1.弹出层的制作, a.先引用这三个: 复制代码 代码如下: <script src=&qu

  • jQuery下实现等待指定元素加载完毕(可改成纯js版)

    先声明下这个方法的使用场合,以免误导大家. 比如在博客园,我们没法修改他的源代码, 那么只能想办法监视元素的出现了. 所以下面方法是在修改不了源码的情况下使用,而非写自己的项目. 今天在改博客几个样式的时候,以为很自然的加上js就可以实现了, 没想到那个是ajax加载的数据,而非页面首次加载的, 比如下面的 "提交评论" 按钮,右侧的 搜索按钮 等. 我很自然的写了 复制代码 代码如下: 1 $("#btn_comment_submit").removeClass(

  • jquery等待效果示例

    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&q

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • jQuery实现鼠标响应式透明度渐变动画效果示例

    jQuery实现鼠标响应式透明度渐变动画效果示例

    本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.

  • jQuery实现鼠标响应式淘宝动画效果示例

    本文实例讲述了jQuery实现鼠标响应式淘宝动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></scri

  • jQuery实现的鼠标响应缓冲动画效果示例

    jQuery实现的鼠标响应缓冲动画效果示例

    本文实例讲述了jQuery实现的鼠标响应缓冲动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js&q

  • jQuery 动态粒子效果示例代码

    1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho

  • jQuery实现新闻播报滚动及淡入淡出效果示例

    jQuery实现新闻播报滚动及淡入淡出效果示例

    本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果.分享给大家供大家参考,具体如下: 下面是上下滚动源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • jQuery实现的简单手风琴效果示例

    jQuery实现的简单手风琴效果示例

    本文实例讲述了jQuery实现的简单手风琴效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery手风琴效果</title> <style> .wrap{ width: 200px;height: auto;margin:5

  • 30个最佳jQuery Lightbox效果插件分享

    30个最佳jQuery Lightbox效果插件分享

    Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

随机推荐