非jQuery替代FitText.js？

我正在研究一個小項目，我需要做的最後一件事是創建一個很好的響應標題。非jQuery替代FitText.js？

我發現FitText.js這似乎是我喜歡很多，正是我需要的東西。唯一的問題是，這個插件使用jQuery，我沒有在項目中使用jQuery，也不想只使用一個小插件。你有沒有聽說過或使用類似的插件FitText.js，除了它不需要jQuery？

2013-03-18 raf

您正在使用什麼庫，如果沒有的jQuery如果有的話？這將有助於將其添加爲標籤。 – 2013-03-18 21:54:42

[FitText.js的源代碼]（https://github.com/davatron5000/FitText.js/blob/master/jquery.fittext.js）的有效部分只是幾行。您可以輕鬆刪除jQuery依賴項。 – 2013-03-18 21:55:00

@KevinB目前沒有。我保持最小的一切。反正我不需要（至少現在）。 – raf 2013-03-18 22:01:00

傑里米·基思（@adactio）是保持非jQuery的替代FitText：

https://github.com/adactio/FitText.js

來源

2013-03-19 14:42:43

謝謝，正是我在找的東西。 – raf 2013-03-19 18:56:08

我不明白你爲什麼要使用它，這是非常普通的代碼。它包含一個未使用的'css'函數，一個非常基本的'addEvent'函數（你的庫或代碼集合中已經有了一個更好的版本），並且使用除零來設置Infinity的最小值和最大值。我沒有看到將最小值和最大值設置爲+/-無窮大的問題，應該使用實數。你只需要一行代碼來計算字體大小，所以只需編寫你自己的函數。要比fitttext.js做得更好（無論是否帶有jQuery）並不困難。 – RobG 2013-03-19 22:26:55

OP，

jQuery壓縮〜94 KB。 Zepto壓縮〜9.7 KB。

總之，如果你包含Zepto，並將插件的最後一行的引用改爲Zepto - 它只是工程。見this Fiddle

(function ($) { 
    $.fn.fitText = function (kompressor, options) { 
     // Setup 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))); 
      }; 
      // Call once to set. 
      resizer(); 
      // Call on resize. Opera debounces their resize by default. 
      $(window).on('resize', resizer); 
     }); 
    }; 
})(Zepto);

根據the docs：

的Zepto是一個最低限度的JavaScript庫的現代瀏覽器有一個主要的jQuery兼容的API。

因此，對於想要使用jQuery插件而不必包含整個jQuery庫的人來說，Zepto似乎是一個合理的解決方法。

*雖然100％的jQuery覆蓋率不是設計目標，但提供的API與他們的jQuery相對應。

希望有所幫助。

來源

2013-03-18 22:59:54 couzzi

謝謝，我一定會檢查出來。 – raf 2013-03-19 18:37:52

像這樣的東西應該讓你去，首先徹底測試。基本上，您可以根據元素的offsetwidth縮放文本的大小。您可能需要設置最小和最大字體大小，但我看不到這一點。

調整大小功能可以是大約兩行代碼。

<style type="text/css"> 
    div { 
    border: 1px solid blue; 
    white-space: nowrap; 
    text-align: center; 
    } 
</style> 

<script> 

function resize(el, factor) { 

    // Get element width 
    var width = el.offsetWidth; 

    // set default for factor 
    if (typeof factor == 'undefined') { 
    factor = 5; 
    } 

    // Set fontsize to new size 
    el.style.fontSize = (width/factor | 0) + 'px'; 
} 

window.onload = function() { 
    function doResize() {resize(document.getElementById('d0'), 6);} 
    window.onresize = doResize; 
    doResize(); 
} 

</script> 

<div id="d0">Some text</div>

來源

2013-03-18 23:01:39 RobG

謝謝，很好的工作。 – raf 2013-03-19 18:56:25

我想這個問題已經解決了，現在，不過我一直在尋找類似的解決方案一會兒回來。我最終創建了自己的Fittext插件，因爲我需要只能在特定的最小屏幕寬度以上才能打開它。所以，如果有人跑進了同樣的問題，這是我想出瞭解決方案：

https://github.com/dinealbrecht/fittext

，

來源

2014-02-28 15:40:50 Dine

非jQuery替代FitText.js？

回答

相關問題