格式化值标签以适应而不被切断

Question

我遇到了一个问题，我在自动格式化我的 jQuery.Knob 实例时被错误地切断了。它最终看起来像这样：

等等……

这个滑块只是在范围内上升（最大值将在 ,000,000 左右，可能更多 ），因此您可以理解显示值的较大部分将随着它的生长被切断，这不是我想要的....

我设法通过重载 draw 方法来抵消这种情况，应用以下内容，但这并不是随着字体大小的增长而这样做的完全证明方法：

$(this.i).css('font-size', '90%').val('$' + parseFloat(this.cv, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ",").toString());

但是，我想要一种更简洁的方法，而不必将我自己的 CSS 应用于所提供的标签。

我确实尝试使用以下 format，但它超载了：

format: function (value) {
    return '$' + parseFloat(value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ",")
},

DEMO

^{我正在使用 Bootstrap 如果这与它有任何关系，这个容器的 HTML 如下所示：}

<div class='row margin-top-45'>
    <div class='col-lg-4'>
        <input value="50000" class="dial" data-step="5000" data-min="0" data-max="10000000" data-thickness="0.2" data-fgColor="#16A085" data-skin="tron">
    </div>
</div>

Answer 1

如果您决定使用此解决方案，这是我动态更改字体的示例：https://jsfiddle.net/3c4d7L53/3/尝试将值从 xxxxx.xx 更改为 xxxxxx.xx，您会注意到字体减少自己。在这里，您可以根据必须使用基本数学显示的位数来决定字体值。

代码本身如下。我保留了你重载的 format 函数并添加了 change 函数：

jQuery('.dial').knob({
  format: function(e) {
    return '$' + parseFloat(e, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ",")
  },
  change: function(v) {
    var v = parseInt(v);
    var valLength = String(v).length;
    var defaultFontSize = 22;

    if (valLength > 5) {
      var defaultFontSize = 22 - ((valLength - 5) * 4);
      this.i.css({
        font: 'bold ' + defaultFontSize + 'px Arial'
      });
    } else {
      this.i.css({
        font: 'bold ' + defaultFontSize + 'px Arial'
      });
    }

  }
});

格式化值标签以适应而不被切断

Formatting value label to fit without being cut off

jquery

jquery-knob