使用样式来更新进度的进度条
问题描述:
我正在使用div从类bootstrap css创建进度条。使用样式来更新进度的进度条
我实际上是使用JQuery动态设置进度条的值。
该进程正在获取进度条的值,然后将其存储到HiddenField中,然后从HiddenField中检索该值。最后,使用JQuery来改变进度条的宽度和aria-valuenow。
问题在于,根据宽度和aria-valuenow,进度条仍然设置为0。任何人都可以帮助我吗?
代码进度条,
<div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
<h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
<div class="progress">
<div class="progress-bar" runat="server" aria-valuemax="100" aria-valuemin="0" role="progressbar"></div>
</div>
在脚本标记代码,
<script type="text/javascript">
$(document).ready(function() {
var hfPercentage = parseFloat($('#hf_Percentage').val());
$('.progress-bar').css('width', hfPercentage + '%').attr('aria-valuenow', hfPercentage);
});
</script>
最后的HiddenField,
<asp:HiddenField runat="server" ID="hf_Percentage" />
我其实使用带有一个WebForm一个主人页面,并且HiddenField和Javascript的位置低于... 尽管在ContentPlaceHolder的结束标记之前将进度条放置得更靠近底部。
我跟着这个链接,但它没有工作.. This here
我在想会不会是在pageLoad的或不运行脚本?
任何帮助感谢请..谢谢!它
图片
码的后面:
int countLogin = al.pieLogin(username);
int countLogout = al.pieLogout(username);
int countFailure = al.pieFailure(username);
int countChangePW = al.pieChangePW(username);
//If more than 20%, prompt Admin to perform actions.
double overallPercentageFull = Math.Round((countFailure * 100.0)/(countFailure + countLogin), 1);
Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
//Lbl_PercentageCheck.Style.Add("width", (overallPercentageFull).ToString() + "%");
//Lbl_PercentageCheck.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());
hf_Percentage.Value = overallPercentageFull.ToString();
答
奥凯发现你的问题。 ToString()
方法使用逗号分隔符创建一个字符串。进度条只接受带点分隔符的双精度进度条。
This Works。
-
将Id添加到进度控制。
<div class="progress"> <div class="progress-bar" runat="server" ID="ProgressBar" aria-valuemax="100" aria-valuemin="0" role="progressbar"> </div> </div>
-
在代码隐藏中使用此控件分配值。这次使用ToString方法的文化参数将创建点分隔符而不是逗号。
ProgressBar.Style.Add("width", overallPercentageFull.ToString(new CultureInfo("en-US")) + "%"); ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString(new CultureInfo("en-US")));
摆脱hiddenField和其他JS。
答
我不认为有人会读这个,因为这个问题相当长。但我设法修复了一切,而不使用JQuery,只是简单地使用后面的代码。
花了几个小时试图解决这一问题,但解决方式是设置风格 - >股利进度条
ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
守则aspx.cs的宽度:
int countLogin = al.pieLogin(username);
int countLogout = al.pieLogout(username);
int countFailure = al.pieFailure(username);
int countChangePW = al.pieChangePW(username);
//If more than 20%, prompt Admin to perform actions.
double overallPercentageFull = Math.Round((countFailure * 100.0)/(countFailure + countLogin), 1);
Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());
if (overallPercentageFull < 15.0)
{
Lbl_PercentageCheck.Style.Add("ForeColor", "green");
}
else if (overallPercentageFull >= 15.0)
{
Lbl_PercentageCheck.Style.Add("ForeColor", "red");
}
守则WebForm:
<div class="col-md-12">
<div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
<h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
<div class="progress">
<div class="progress-bar" aria-valuemax="100" aria-valuemin="0" style="width: 0%" runat="server" id="ProgressBarDiv" role="progressbar">
</div>
</div>
</div>
最后,
你做你的脚本代码前加入jQuery库? –
@AlivetoDie我刚刚从nuget包中加入它,但这一次我得到它0%.. – domster
我下载了jQuery库,并将其添加到我的主页和我的进度条和脚本所在的页面,但我得到了0%。在我的问题中,我在最后添加了一张图片,它现在是9.5%,但现在显示为0%。 – domster