为我的html页面创建一个微调器 [英] create a spinner for my html page
问题描述
我有一个用户需要提交给服务器的Web表单。服务器响应可能需要几秒钟。所以我想向用户展示一个微调框,以便所有其他字段都变灰,并且用户在Web窗体中进行任何更改,并且在中心我有一个微调框持续旋转。请帮助我如何继续。
I have a web form which the user needs to submit to the server. The server response may take seconds. So I want to show the user a spinner, such that all other fields are grayed and the user make any changes in the webform and in the center I have a spinner which keeps rotating.. Please help me in how should I proceed..
推荐答案
以下是我的完整解决方案,使用ajax发送查询(如果通过使用离开页面,则不能拥有微调器标准表格帖子):
Here's my complete solution, using ajax to send the query (you can't have a spinner if you leave the page by using a standard form post) :
loading = {
count: 0
};
loading.finish = function() {
this.count--;
if (this.count==0) this.$div.hide();
};
//
loading.start = function() {
this.count++;
if (!this.$div) {
var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">';
html += '<table width=100% height=100%>';
html += '<tr><td align=center valign=middle>';
html += '<img src=img/loading.gif>';
html += '</td></tr>';
html += '</table></div>';
this.$div=$(html);
this.$div.prependTo('body');
}
setTimeout(function(){
if (loading.count>0) loading.$div.show();
}, 500);
};
// the function to call
askUrl = function(url, success) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
success(msg);
}
loading.finish();
}
};
loading.start();
httpRequest.open('GET', url);
httpRequest.send();
};
如果您调用askUrl并且服务器在500毫秒内没有应答,则屏幕变灰,微调器显示。
If you call askUrl and the servers doesn't answer in 500 ms, the screen is greyed and a spinner is displayed.
I got my gif spinner here.
这篇关于为我的html页面创建一个微调器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!