2

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

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

我想要什么：我正在尝试拥有类似的功能，如果我点击“ + ”，值会增加，进度条也会增加。目前它在进度条中也有“ 50% ”的价值。所以如果我点击 + 值和进度条会增加，如果我点击“-”值和进度条会减少，这是可能的。

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

HTML 

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

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

  <p>50%</p>

js

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

5 回答 5

3

你可以像下面这样，

$(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/

于 2013-08-19T12:21:28.913 回答
0

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

于 2013-08-19T12:15:36.557 回答
0

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

$("#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);

更新的小提琴

于 2013-08-19T12:20:27.363 回答
0

这是您想要执行的操作的工作代码，如本菲德尔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。

于 2013-08-19T12:22:53.183 回答
0

试试这个 演示

点击“+”，数值增加 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
    });
    });
  });

希望这会有所帮助，谢谢

于 2013-08-19T12:29:13.817 回答