如何为 jQuery UI 中可调整大小的元素设置 diffedert 参数

Question

我使用可拖动和可调整大小的元素，我在页面上有两种类型的框，小的没有图像，大的有图像。

对于这 2 个元素，我在框上有可调整大小的文本，我在用户开始调整元素大小时创建函数，其中文本正在更改，对于大框，它工作正常，对于小框，没有。

我喜欢这里的问题：

 $('.box').resizable({
          minWidth: 50,
          minHeight: 44,
          maxWidth: 205,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

对于小盒子我想设置这个参数：

$('.box').resizable({
          minWidth: 20,
          minHeight: 24,
          maxWidth: 100,
          maxHeight: 87,
          resize: function(event, ui) {
            var size = ui.size;
            $(this).children().css('font-size', (size.width * size.height) / 580 + 'px');
            $(this).css('font-size', (size.width * size.height) / 580 + 'px');
          }
        });

如果我为小元素设置了与正常工作不同的参数。我如何为对象设置不同的参数。另外，我在视图中动态创建了对象。

我的代码 - jsFiddle

Answer 1

我在这里处理过你的例子：https://jsfiddle.net/Twisty/czhLjtud/12/

JavaScript

$(function() {
  function calcFont(s) {
    var result = Math.round((s.width * s.height) / 580);
    return result + "px";
  }

  $('.lpms3-box').draggable();

  $('.lpms3-box > .box').resizable({
    minWidth: 50,
    minHeight: 44,
    maxWidth: 205,
    maxHeight: 87,
    resize: function(event, ui) {
      var newFont = calcFont(ui.size);
      console.log(ui.size.width, ui.size.height, (ui.size.width * ui.size.height) / 580, "Set new font: " + newFont);
      $(this).css('font-size', newFont);
    }
  });
});

这似乎对两个盒子都有效。不清楚为什么它对您不起作用。

对于数学，最好在附加任何字符串项之前将所有部分包裹在 ( 和 ) 中。例如：

(size.width * size.height) / 580 + 'px'

此代码有点模棱两可，+ 可能被解读为错误的运算符。我建议这样做：

((size.width * size.height) / 580) + 'px'

这样代码就知道正确的操作，并将使用 + 作为连接运算符而不是加法运算符。

如何为 jQuery UI 中可调整大小的元素设置 diffedert 参数

How to set diffedert parameter for resizable elements in jQuery UI

javascript

jquery

jquery-ui