javascript - 使用带有 change() 方法的 FitText

Question

如何触发以下 fittext.js 函数

$.fn.fitText = function( kompressor, options ) {
    var compressor = kompressor || 1,
            settings = $.extend({
              'minFontSize' : Number.NEGATIVE_INFINITY,
              'maxFontSize' : Number.POSITIVE_INFINITY
            }, options);

        return this.each(function(){

          // Store the object
          var $this = $(this);

          // Resizer() resizes items based on the object width divided by the compressor * 10
          var resizer = function () {
            $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
          };
    )};

使用 change() 方法？

$('#drop').change(function(){
     $('#tf').css('width', $(this).val());
     //resizer(); // does not work
     //$('#tf').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });// does not work
});

Answer 1

需要触发resize事件，因为fittext插件监听window的resize事件调用内部resize方法

$(window).on('resize.fittext orientationchange.fittext', resizer);

所以

$('#tf').fitText(1.2, {
    minFontSize: '20px',
    maxFontSize: '40px'
});

$('#drop').change(function () {
    $('#tf').css('width', $(this).val());
    $(window).trigger('resize.fittext');
});

演示：小提琴- 将宽度设置为 100/300/500