提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery等待效果示例

jQuery 示例 效果 等待
2023-06-13 09:15:25 时间

实现查询等待：正在查询中，请稍后．．．

复制代码代码如下:


<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>正在查询，请稍等...</title>

<styletype="text/css">
.query_hint{
 border:5pxsolid#939393;
 width:250px;
 height:50px;
 line-height:55px;
 padding:020px;
 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_hintimg{position:relative;top:10px;left:-8px;}
</style>
 </head>

 <body>
 <divid="query_hint"class="query_hint">
  <imgsrc="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif"/>正在查询，请稍等...
 </div>
 </body>
</html>

jquery代码

复制代码代码如下:


<divid="query_hint"class="query_hint">
   <imgsrc="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif"/>正在查询，请稍等．．．
</div>


<scriptsrc="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript">
//页面加载完成之后去掉Loading
$(document).ready(function(){
   parent.frames[0].queryHintCallback("query_hint");
});

/**
 *@description *显示查询等待层
 *@paramquery_hint
 */
functionshow_query_hint(query_hint){
   varquery_hint=document.getElementById(query_hint);
   query_hint.style.display="block";
}

/**
 *@description查询结果回调函数
 *@paramquery_hint要隐藏的提示层id
 */
functionqueryHintCallback(query_hint){
   varquery_hint=document.getElementById(query_hint);
   query_hint.style.display="none";
}
</script>

相关文章