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

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

解决方法

您可以使用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;
}

您可以在jsfiddlejsFiddle link中查看此解决方

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...