[英]bootstrap-progressbar jQuery plugin
我在使用用於引導程序進度條的jQuery插件時遇到了一些麻煩-http: //minddust.github.io/bootstrap-progressbar/bootstrap-2.3.2.html
我想根據所選選項向用戶提供進度條的預覽。 我面臨的問題是.progressbar({...})
僅記錄選項中的第一個更改,而不記錄其后的更改。 后續更改不會更改這些值。
如果選擇選項"percentage"
則條形文字顯示為"40%"
,如果選擇"amount"
則條形文字顯示為"40/100"
。
因此,這里的問題是,如果我先選擇"percentage"
選項,然后再單擊按鈕更改為"amount"
,我會看到百分比顯示而不是金額。
我在jQuery代碼中缺少什么?
HTML-
<div id="demo-progress-bar" class="progress">
<div class="bar" aria-valuetransitiongoal="40">
<span style="margin:0 10px;"></span>
</div>
</div>
<a id="progress-bars-preview" href="#">Click to Preview</a>
<select id="progress_bar-percent" name="progress_bar-percent">
<option value="percentage">Percentage</option>
<option value="amount">Amount</option>
</select>
jQuery-
$('#progress-bars-preview').click(function(){
var percent = $('#progress_bar-percent').val();
if(percent=="percentage"){
percent = true;
}else{
percent = false;
}
$("#demo-progress-bar .bar").progressbar({
display_text: "fill",
done: function(current_percentage) {
$("#demo-progress-bar .bar span").show("slow");
},
use_percentage: percent
});
});
$('#progress-bars-preview').click(function(){
var randomValue = Math.floor(Math.random() * (100 - 10 + 1) + 10);
var element = $("#demo-progress-bar").html();
$("#demo-progress-bar").html("").html(element);
$("#demo-progress-bar .bar").attr('aria-valuetransitiongoal',randomValue);
var percent = $('#progress_bar-percent').val();
if(percent=="percentage"){
percent = true;
}else{
percent = false;
}
$("#demo-progress-bar .bar").progressbar({
display_text: "fill",
done: function(current_percentage) {
$("#demo-progress-bar .bar span").show("slow");
},
use_percentage: percent
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.