可以使用 jquery-ui 调整文本大小吗?

问题描述

p 标签中的 html 文本是否可以使用 jquery-ui 调整大小，或者 div 标签中没有 p 标签是否可以调整大小?我已经从以下示例中使用 jquery ui 调整了图像大小，但文本没有调整大小 http://jqueryui.com/演示/可调整大小/.

Can html text in p tag is resizable using jquery-ui or without p tag in a div tag is resizable? I have done resizing the image using jquery ui from following example but text is not getting resized http://jqueryui.com/demos/resizable/.

推荐答案

您可以使用 resize 事件处理程序.诀窍是如何计算新的字体大小.将此解决方案作为变体检查:

You may use resize event handler. The trick is how to calculate new font size. Check this solution as a variant:

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:

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 链接

You may look this solution at jsFiddle: jsFiddle link

这篇关于可以使用 jquery-ui 调整文本大小吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！