4

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

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

检查这个 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
            }

当我增加大小时，“输入消息”字体大小正在增加。但是当我减少它并没有减少。我怎样才能做到这一点？

4

2 回答 2

3

这个小部件有一个名为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"); 
  }
});
于 2012-11-20T08:44:14.737 回答
0

试试这个：

$( ".selector" ).resizable({ alsoResize: "#text" });

于 2012-11-20T08:48:20.107 回答