4

サイズ変更可能なJqueryUIプラグインを使用しています。サイズ変更可能な要素内にcontenteditabledivがあります。

サイズ変更を大きくするとcontenteditabledivのフォントサイズを大きくし、サイズ変更を小さくするとフォントサイズを小さくしたい。基本的に、サイズ変更時にテキストをcontenteditabledivに最もよく適合させたいと思います。

この 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 に答える