表单提交loading加载提示效果

 

提交表单后,有时候会需要一定的响应时间,比如说,若需要往很多表里面插入数据,可能会出现点击提交后,服务器响应还未返回,在一定时间内浏览器毫无反应,会给用户造成错觉,以为系统是不是崩了,这就很尴尬啦。

因此,可以自定义在提交表单后添加一个loading效果。

来来来,先附一张动图:

CSS:

.submit_loading {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#000;
    text-align:center;
    opacity:0.3;
}
.loading_show {
    margin-top:15%;
}
.loading_context {
    color:#fff;
}

其中opacity属性用来设置 div 元素的不透明级别,可根据具体要求调整标签透明度。

HTML:

<div id="loading" class="submit_loading" style="display:none">
    <div class="loading_show">
        <img src="../loading.gif">
        <p class="loading_context">正在提交,请稍候。。。</p>
    </div>
</div>

以下JS用的是KISSY

在表单提交事件将加载效果显示:

//提交表单事件
Event.on("#save",'click',function(e){
    //此处省略n行代码
    DOM.show("#loading");
    //此处省略n行代码
});

当然了,如果提交时后端抛出异常,提交失败(或者提交成功后不刷新页面),需要在提交表单请求的回调函数中将加载效果隐藏,以便在页面能够进一步操作:

DOM.hide("#loading");

如有错误之处,欢迎指出,万分感谢!

 

展开阅读全文

没有更多推荐了,返回首页