Question

我正在使用Resizable Jquery UI插件。我在可调整大小的元素中有一个contenteditable div。

当我增加调整大小时，我希望contenteditable div的字体大小增加，并且当我减少调整大小时减少字体大小。基本上我希望文本在调整大小时最符合可疑的div。

检查this jsfiddle

代码：

$(".resizeable").resizable({
                containment: "#background",
                minHeight:   120,
                maxHeight:   350,
                maxWidth:    550,
                minWidth:    220,
                resize: function(event, ui) {
                    resizeText(1);
                }
            });

            function resizeText(multiplier) {
                var textarea = $("#message"); 
                var fs = (parseFloat(textarea.css('font-size')) + multiplier).toString() + 'px';    // Increment fontsize
                var text = textarea.val();                                                          // Firefox won't clone val() content (wierd..)
                textarea.css({'font-size':fs}).replaceWith( textarea.clone().val(text) );           // Replace textarea w/ clone of itself to overcome line-height bug in IE
            }

当我增加尺寸时，'输入消息'字体大小正在增加。但是，当我减少它不减少。我怎样才能实现这一目标？

Answer 1

此窗口小部件具有名为resize的事件。你可以听这个事件，实现你想要的。

例如：

$("#contenteditable").resizable({
  resize: function(event, ui) {
    // handle fontsize here
    console.log(ui.size); // gives you the current size of the div
    var size = ui.size;
    // something like this change the values according to your requirements
    $(this).css("font-size", (size.width * size.height)/1000 + "px"); 
  }
});

Answer 2

试试这个：

$（“。selector”）。resizable（{alsoResize：“＃text”}）;

Jquery：使用可调整大小的UI插件增加或减少文本的字体大小

2 个答案: