0

我正在使用jQuery 旋钮，我有以下代码：

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*100).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

var $retention = this.$overviewHandler.find('#retention_wrapper');
$retention.find('#1_day .knob').knob(knobOption);
$retention.find('#3_day .knob').knob(knobOption);
$retention.find('#7_day .knob').knob(knobOption);

在此之后，我将在 Ajax 回调中调用以下内容：

        $retention.find('#1_day .knob').val(oneDayRet).trigger('change');
        $retention.find('#3_day .knob').val(threeDayRet).trigger('change');
        $retention.find('#7_day .knob').val(sevenDayRet).trigger('change');

但是在这之后，我发现formathook中的值是1，即使我传递了一个0.704的值。所以旋钮显示 100% 不是我想要的。

我的问题是什么？

4

1 回答 1

0

我已经看了一些。我认为你可以通过传入 1 到 1000 之间的值然后格式化来实现你想要的。

您将传入一个介于 1 和 1000 之间的值。而不是.704传入704. 您正在格式化的行将变为： return (value*.1).toFixed(1)+"%";

您的新旋钮选项将如下所示。最大值为1000且格式化方法已更改。

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1000,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*.1).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

编辑

因为我们在format方法中弄乱了值的输出，所以我们还需要在方法中反转该格式.parse。

.parse因此，在您的 jQuery 旋钮选项中添加以下方法，事情应该会按预期开始工作。基本上我们想要做的是检查我们的格式是否被应用。为此，我们检查值是否以 % 结尾。如果是这样，那么我们假设应用了我们的格式并将值除以（因为我们在 format 方法中.1乘以）。.1

// ... codez
 'format': function(value) {
     if (isNaN(value)) return "-";
     return (value * .1).toFixed(1) + "%"; //percentage
 },
 'parse': function(value) {
     if (typeof(value) !== 'string') return value; // if we don't have a string, then don't bother parsing
     if(value === '-') return value;
     var suffix = '%';
     // see https://stackoverflow.com/a/2548133/296889
     if (value.indexOf(suffix, value.length - suffix.length) === -1) return parseFloat(value);
     return parseFloat(value) / .1; // there is special formatting, parse and convert
 },
// ... more codez

据我所知，原始问题的原因是由于库使用了~~四舍五入的值。似乎截断小数点后的任何值~~。

该库正在执行以下操作： var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; 所以让我们用 .704 快速浏览一下。

(v < 0) ? -0.5 : 0.5.704 小于 0。我们最终得到 0.5。

0.5 + (v/this.o.step)- this.o.step 是 1。.704 除以 1 + 0.5 是 1.204。

~~1.204- 这产生 1。

(1) * this.o.step- this.o.step 是 1。1 乘以 1 仍然是 1。整个过程的结果是 1。

这就是为什么当您输入 0.704 时会得到 1。因此，如上所述，解决方案是提供没有十进制值的输入（这样它们就不会被 剥离~~）。

于 2015-06-17T03:31:24.110 回答