Question

我有一个jQuery UI进度条我想要添加额外的东西。我不确定这是否可能，因为我不擅长jQuery或javascripts。

这是我目前所拥有的（ js小提琴）：http://jsfiddle.net/saifrahu28/WH2dt/

我想要的是什么：我正在尝试使用这样的功能，如果我点击“ + ”，则值会增加，还会显示进度条。目前，进度条中的值也有“ 50％”。如果我点击+值并且进度条会增加，那么可能会有这种情况，如果我点击“ - ”那么值和进度条会减少。

如果有解决方案，对我来说将是一个很大的帮助。

HTML

<div id="progressbar"></div>

  <p>+</p>
  <p>-</p>

  <p>50%</p>

JS

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

Answer 1

你可以像下面这样做，

$(function() {
    $( "#progressbar" ).progressbar({
      value: 50
    })
    .data("value","50");

    $("#plus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue <= 100) {
            $( "#progressbar" ).progressbar({
              value: currValue+1
            }).data("value",currValue+1);
            $("#progressLabel").html((currValue+1)+"%");
        }    
    });

    $("#minus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue > 0) {
            $( "#progressbar" ).progressbar({
              value: currValue-1
            }).data("value",currValue-1);
            $("#progressLabel").html((currValue-1)+"%");
        }    
    });

  });

选中此http://jsfiddle.net/JfYsh/

Answer 2

将id添加到+＆amp; - 段落并使用jquery您可以使用.click事件执行此操作。你也可以在这里看到它：http://jsfiddle.net/WH2dt/2/

Answer 3

您需要将一些点击处理程序附加到设置进度条值的+和-按钮。试试这个：

$("#progressbar").progressbar({
    value: 50
});

var setProgressBarValue = function(dir) {
    var step = 5;
    var multi = $(this).hasClass('inc') ? 1 : -1
    $('#progressbar').progressbar('value', $('#progressbar').progressbar('value') + (step * multi));
}

$('.inc, .dec').click(setProgressBarValue);

Updated fiddle

Answer 4

以下是您要执行的操作代码，如此fiddel http://jsfiddle.net/XR9Vj/

中所示

HTML

<div id="progressbar"></div>
<p class="increase">+</p>
<p class="decrease">-</p>
<p class="value">50%</p>

的Javascript

$(function () {
    progressValue = 50;
    $("#progressbar").progressbar({
        value: progressValue
    });
    $('.increase').on('click', function () {
        $("#progressbar").progressbar('value', progressValue++);
        $('.value').text(progressValue + "%");
    });
    $('.decrease').on('click', function () {
        $("#progressbar").progressbar('value', progressValue--);
        $('.value').text(progressValue + "%");
    });
});

希望它有所帮助，

R上。

Answer 5

试试 DEMO

单击“+”时，值增加10，单击“ - ”时，值减少10

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

    $( "#plus" ).click(function(){
      $( "#progressbar" ).progressbar({
      value: $("#progressbar").progressbar("value")+10
    });
    });

    $( "#minus" ).click(function(){
      $( "#progressbar" ).progressbar({
      value: $("#progressbar").progressbar("value")-10
    });
    });
  });

希望这有帮助，谢谢

单击以增加或减少jQuery Ui进度条

5 个答案: