可以使用jquery-ui調整文本大小？

Question

p標籤中的html文本是否可以使用jquery-ui調整大小或在div標籤中沒有p標記可調整大小？我已經完成了調整圖像使用jquery ui從下面的例子，但文字沒有得到調整http://jqueryui.com/demos/resizable/。

Answer 1

您可以使用resize事件處理函數。訣竅是如何計算新的字體大小。檢查此方案作爲一個變體：

HTML：

<div id="resizable" class="ui-widget-content"> 
    <h3 class="ui-widget-header">Resizable</h3> 
    <div id="content">Quis non magna sagittis, et cras tortor nunc? Enim, lectus et quis penatibus enim augue eros, dis sit sit urna cras placerat sociis porta</div> 
</div> 

的Javascript：

var initDiagonal; 
var initFontSize; 

$(function() { 
    $("#resizable").resizable({ 
     alsoResize: '#content', 
     create: function(event, ui) { 
      initDiagonal = getContentDiagonal(); 
      initFontSize = parseInt($("#content").css("font-size")); 
     }, 
     resize: function(e, ui) { 
      var newDiagonal = getContentDiagonal(); 
      var ratio = newDiagonal/initDiagonal; 

      $("#content").css("font-size", initFontSize + ratio * 3); 
     } 
    }); 
}); 

function getContentDiagonal() { 
    var contentWidth = $("#content").width(); 
    var contentHeight = $("#content").height(); 
    return contentWidth * contentWidth + contentHeight * contentHeight; 
} 

你可以看看這個解決方案在的jsfiddle：jsFiddle link

Answer 2

文字大小與jQuery無關。但是，您可以將CSS屬性綁定到滑塊。

$('#slideBar').slider({ 
    startValue: 12, 
    minValue: 0, 
    maxValue: 100, 
    stop: function(e, ui) { 
     $("#text").css({fontSize: ui.value + 8}); 

    } 
});