我在我的网站上使用 Bootstrap v3.3.5 。
在一个场景中，我在Bootstrap模式对话框中显示一个表单。用户填写数据并提交表单。提交表单后，表单看起来就像从服务器收到响应一样。
所以，我想要做的是显示一个蓝色的水平进度条，与gmail在登录后加载收件箱邮件列表时使用的蓝色水平进度条非常相似。这个进度条应该像gmail的进度条一样是动态的（即渐进性而不是像旋转圆形加载器图像）。
它应显示在表单顶部，并显示消息＆＃34;请稍候......您的活动正在生成。＆＃34;我在代码中添加了一条注释，告诉它应该准确显示在哪里。
以下是我的Bootstrap模式的HTML代码：
<form method="post" action="{$site_url}add_event.php" id="formAddEvent" >
<!-- The gmail look alike loader should display here only upon successfull submission of a form. -->
<div class="form-group" id="addEventErrorMsg" style="display:none; color:#FF0000;">
</div>
<div class="form-group">
<input type="text" name="txt_event_title" id="txt_event_title" autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" />
</div>
<div class="form-group">
<textarea type="text" name="txt_event_description" id="txt_event_description" autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;" ></textarea>
</div>
<table border="0" cellspacing="10">
<tr>
<th><span class="event-title1" style="margin-bottom:5px;">Start Date:</span></th>
<th><span class="event-title1" style="margin-bottom:5px;">End Date:</span></th>
</tr>
<tr>
<td>
<div style="margin-right:15px;" class="form-inline form-group event-selection">
<div class="form-group has-feedback">
<div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
<input type='text' id='event_start_date' name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" />
<span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
</div>
</td>
<td>
<div class="form-inline form-group event-selection">
<div class="form-group has-feedback">
<div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
<input type='text' id='event_end_date' name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" />
<span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class="form-group has-feedback">
<input type="text" name="txt_event_location" id="txt_event_location" autocomplete="off" class="controls form-control custom-height" placeholder="Event Location" style="height:30px;" />
<span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"></span>
</div>
<div style="clear:both;"> </div>
<div id="map"></div>
<div class="form-group">
<input type="text" name="txt_event_room" id="txt_event_room" autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" />
</div>
<div class="form-group">
<div id="custom-templates">
<input class="typeahead form-control custom-height" id="selected_groupname" name="selected_groupname" type="text" placeholder="Invite Group" value="{foreach from=$user_group_list1 item=grouplist key=key} {if $groupId==$grouplist.page_id} {$grouplist.title} {/if} {/foreach}">
<input type="hidden" name="selected_groupid" id="selected_groupid" value="" />
</div>
</div>
<div class="modal-footer text-center">
<button class="btn btn-primary" id="btn_add_event" type="button">Add Event</button>
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
</div>
</form>
点击标识为btn_add_event的按钮时，表单提交调用的函数如下：
$(document).ready(function() {
$("#btn_add_event").click(function() {
var strSeriaze = $( "#formAddEvent" ).serialize();
url = $( "#formAddEvent" ).attr('action');
$("#btn_add_event").attr('disabled', 'disabled');
$("#addEventErrorMsg").html('');
$.ajax({
url : url,
type : "POST",
data : {postData:strSeriaze},
beforeSend: function() {
$('#loader-icon').show();
},
complete : function() {
$('#loader-icon').hide();
},
success : function(data) {
// $("#events-result").append(data);
$('#loader-icon').hide();
if(data == true) {
$("#myModal-add-event").modal('hide');
$("#myModal-add-event").hide();
//window.location = site_url + "event_index.php";
window.location.href = site_url + "event_index.php";
return false;
} else {
$("#btn_add_event").attr('disabled', false);
$("#addEventErrorMsg").show();
$("#addEventErrorMsg").html(data);
}
},
error: function() {}
});
})
});
请帮帮我。感谢。
我的问题与其他问题不同。我不知道如何使用响应时间来处理进度条百分比或进度。我无法从任何地方获得解决方案。请从我的问题中删除重复的标记。
答案 0 :(得分：2)
我的问题与其他问题不同。我不知道该怎么做 使用响应时间处理进度条百分比或进度。 我无法从任何地方获得解决方案。请删除标签 从我的问题重复。
不，它没有区别，因此它与
重复唯一的区别是你在赏金通知中说过
此问题从user2839497获得了价值+50声望的赏金。
这个问题广泛适用于大量受众。一个详细的 需要规范的答案来解决所有问题。
我想要这个问题的规范答案。我想要一个工作演示 一个代码必须与我发布的代码集成 题。我需要整个工作代码演示（jsfiddle）。 我不想要任何参考链接用于教程或其他任何内容。一世 只是想要完全相同的谷歌风格的蓝色进展 在我的网站工作的ajax函数调用。无论如何你做我的 代码使用必要的其他代码。谢谢。敏锐地等待着 完美的答案人。祝你有愉快的一天。
由于SO不是其用户处理的代码工厂，因此欺骗是解决问题的绝佳方式。
当问题以副本形式结束时，此社区答案将被删除。
在post review 之后编辑
此代码段显示了进度条的基本部分。
HTML
<div class="progress-bar"></div>
脚本
function set_pbar(p) {
$('.progress-bar').css({ width:(p * 100)+'%'});
}
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
//Sending in progress, divided with 2 make bar 50% wide after sending
set_pbar(evt.loaded / evt.total / 2);
}
}, false);
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
//Receiving in progress, dividing with 2 and adding 0.5 make bar start at 50%
set_pbar(0.5 + (evt.loaded / evt.total / 2));
}
}, false);
return xhr;
},
url: "/echo/json/",
type: 'POST',
data: {json: JSON.stringify(new Array(100000))},
success: function(data){
//Loaded...
}
});