jQuery Progress Bar не работает

Я начинающий jQuery, и я пытаюсь создать динамический индикатор выполнения jQuery. Что мне нужно сделать, так это предложить ряд флажков на странице, чтобы, когда посетитель проверяет или отменяет флажок, он увеличит или уменьшит значение, указанное на индикаторе выполнения. Кроме того, мне нужно предупредить посетителя, когда они достигли максимальной суммы (в процентах). Любая помощь будет оценена по достоинству. Код ниже привяжет событие клика к панели прогресса, но он не будет увеличиваться или уменьшаться правильно, и мой макс не работает?jQuery Progress Bar не работает

Вот что у меня есть:

Javascript:

<head> 

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#budgetbar").progressbar({ value: 0 }); 
     $(".option1").click(function() { 
        $("#budgetbar").progressbar({ value: 10 }); 

     }); 
     $(".option2").click(function() { 
        $("#budgetbar").progressbar({ value: 50 }); 

     }); 
      $(".option3").click(function() { 
        $("#budgetbar").progressbar({ value: 20 }); 

     }); 
     $(".option4").click(function() { 
        $("#budgetbar").progressbar({ value: 50 }); 

     }); 

    $("#budgetbar").progressBar({ max: 100, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Budget limit reached!"); } }}); 

}); 
</script> 

</head>

HTML:

<body> 

<div id="budgetbar"></div> 
<div>  
    <input type="checkbox" class="option1" />Expense 1 - $100,000<br /> 
    <input type="checkbox" class="option2" />Expense 2 - $500,000<br /> 
    <input type="checkbox" class="option3" />Expense 3 - $200,000<br /> 
    <input type="checkbox" class="option4" />Expense 4 - $500,000<br /> 
* Max Expenses - $1,000,000 
</div>

источник

2012-04-06 KenP

Вы можете изменить значение JQuery UI прогресс бар с помощью

$("#budgetbar").progressbar("option", "value", 25);

Это устанавливает только значение до 25 (не увеличивается на 25). Для того, чтобы получить значение, которое вы можете использовать

$("#budgetbar").progressbar("option", "value");

И вы, вероятно, будет необходимо проверить, если флажок установлен :-)

Я хотел бы сделать это так (не проверено)

var $budgetbar = $("#budgetbar"); // It's no good to repeat selections 
$(".option1").click(function() { 
    var thisValue = 25, // This checkbox' value 
     currentValue = $budgetbar.progressbar("option", "value"), 
     newValue; 
    if($(this).is(':checked')) { 
     newValue = currentValue + thisValue; // add 
    } else { 
     newValue = currentValue - thisValue; // subtract 
    } 
    $budgetbar.progressbar("option", "value", newValue) 
});

Edit, предупреждение (может быть лучший способ):

$budgetbar.bind("progressbarchange", function(event, ui) { 
    var value = $budgetbar.progressbar("option", "value"); 
    if (value > 100) { 
     alert("You're over 100"); 
    } 
});

источник

2012-04-06 17:36:25 A123321

Спасибо Эндрю, но я не понимаю, куда это пойдет в моем сценарии? Также это увеличит или уменьшит значение, если несколько ящиков отмечены или сняты флажки? – KenP

Это сработало отлично! Мне просто нужно добавить начальное значение в #budgetbar: var $ budgetbar = $ ("# budgetbar"). Progressbar ({значение: 0}); Теперь единственный вопрос, который я оставил, предупреждает посетителя, когда он достиг 100-процентного предела. Каждый раз, когда я добавляю эту строку в скрипт, он говорит: «$ budgetbar.progressBar не является функцией»: $ budgetbar.progressBar ({max: 100, textFormat: 'fraction', callback: function (data) {if (data.running_value == data.value) {alert ("Достигнуто ограничение бюджета!");}}}); Любые мысли на этой линии? – KenP

Я только что разместил решение выше, которое работает корректно, возможно, вы можете это использовать. –

Вы можете упростить ваш код совсем немного, если вы задница Значения IGN к вашим input флажков:

<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br /> 
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br /> 
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br /> 
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />

Таким образом, вы не должны обрабатывать каждый флажок по-разному. Вместо этого вы можете использовать одиночный обработчик для всех ваших вариантов. Это позволяет отлаживать и обслуживать код много проще.

Во-вторых, по мере изменения каждой опции вы должны присвоить всего значение progressbar, а не только значение параметра clicked. Используйте change вместо click, так как это будет срабатывать только тогда, когда флажок изменит его состояние. (Небольшая разница, я знаю).

// The only handler you need: 
$('.option').on('change', function() { 
    // The total 
    var total = 0; 

    // Sum the value of all checked checkboxes 
    $('.option:checked').each(function() { 
     total += parseInt($(this).val()); 
    }); 

    // Assign the value using the correct method: 
    $("#budgetbar").progressbar("value", total); 
});

Кроме того, вы используете progressBar на ваш звонок, чтобы установить параметры (обратите внимание на капитал B). Правильное название: progressbar.

Пример: http://jsfiddle.net/DjWCz/2/

HTML: (обратите внимание на изменение имени класса и добавленной стоимости)

<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br /> 
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br /> 
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br /> 
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />

SCRIPT:

<script type="text/javascript"> 
    $("#budgetbar").progressbar({ 
     value: 0, 
     max: 100, 
     textFormat: 'fraction', 
     complete: function(event, ui) { 
      alert("Budget limit reached!"); 
     } 
    }); 

    $('.option').on('change', function() { 
     var total = 0; 

     $('.option:checked').each(function() { 
      total += parseInt($(this).val()); 
     }); 

     $("#budgetbar").progressbar("value", total); 
    }); 
</script>

источник

2012-04-06 17:47:20

Когда я попробовал свой код, индикатор прогресса исчез. Поэтому я добавил одну строку ниже, но она все равно не увеличивала и не уменьшала значение. $ ("# budgetbar"). Progressbar ({значение: 0}); – KenP

Вам все еще нужен код инициализации. См. Править выше. Он работает в jsfiddle. Используйте это как ссылку. –

Также обратите внимание, что я изменил имена классов ваших параметров. Все они должны иметь параметр «class =» «. –

Попробуйте сохранить значение из индикатор прогресса на переменной, таким образом вы можете увеличить или уменьшить его значение для правильного расчета.

это будет что-то вроде:

previousValue = 0; 
$("#budgetbar").progressbar({ 
    value: 10+previousValue 
});

Кроме того, вам нужно проверить, если флажок установлен, а не использовать «щелчок» событие. Попробуйте что-нибудь подобное

if($('#checkboxId').is(':checked'))

Или, конечно, вам нужно добавить идентификатор к своим флажкам.

Надеюсь, это поможет!

источник

2012-04-06 17:51:18

Здесь вы идете, надеюсь, что это поможет.

Cheers.

<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     $("#budgetbar").progressbar(); 
    }); 

    var currentProgress = 0; 

    function adjustProgress(checkbox) 
    { 
     if ($(checkbox).is(":checked")) 
     { 
      currentProgress += parseInt($(checkbox).val()); 
     } 
     else 
     { 
      currentProgress -= parseInt($(checkbox).val()); 
     } 

     $("#budgetbar").progressbar("option" , "value" , currentProgress) 

     if (currentProgress > 100) 
     { 
      alert("You have exceeded the maximum value of 100"); 
     } 
    } 
</script> 

<div id="budgetbar"/> 

<div> 
    <input type="checkbox" class="option1" value="10" onclick="adjustProgress(this)"/>Expense 1 - $100,000<br/> 
    <input type="checkbox" class="option2" value="50" onclick="adjustProgress(this)"/>Expense 2 - $500,000<br/> 
    <input type="checkbox" class="option3" value="20" onclick="adjustProgress(this)"/>Expense 3 - $200,000<br/> 
    <input type="checkbox" class="option4" value="50" onclick="adjustProgress(this)"/>Expense 4 - $500,000<br/> 
    * Max Expenses - $1,000,000 
</div>

источник

2012-04-06 18:05:50

jQuery Progress Bar не работает

ответ

Смежные вопросы