簡體   English   中英

bootstrap-progressbar jQuery插件

[英]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
    });
});

http://jsfiddle.net/Lcp9A/3/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM