jQuery UI可调整大小：以编程方式设置大小？

Question

例如，用户输入宽度和高度值以告知小部件调整到该维度。如何实现这一点？

Answer 1

var w = prompt('width?')*1; 
var h = prompt('height?')*1; 
$('#resizable').css('width', w); 
$('#resizable').css('height', h); 

您不需要使用jqueryui的可调整大小以便在脚本中调整它的大小。 jQuery .css（）方法适用于任何DOM元素。您也可以animate({width: 500},1000)。

Answer 2

我用这个下面的代码：

function resize(target, new_width, new_height){ 
    var $wrapper = $(target).resizable('widget'), 
     $element = $wrapper.find('.ui-resizable'), 
     dx = $element.width() - new_width, 
     dy = $element.height() - new_height; 

    $element.width(new_width); 
    $wrapper.width($wrapper.width() - dx); 
    $element.height(new_height); 
    $wrapper.height($wrapper.height() - dy); 
} 

Answer 3

可以扩展原有的可调整大小的小部件一样如下：

(function($) { 
    $.widget("custom.mysizable", $.ui.resizable, { 

     options: { 
      x: 0, 
      y: 0 
     }, 

     _create: function() { 
      $.ui.resizable.prototype._create.call(this); 
      this.options['x'] = $(this.element).width(); 
      this.options['y'] = $(this.element).height(); 
     }, 

     _resize: function(x, y) { 
      if(x != null){ 
       $(this.element).width(x); 
      } 
      if(y != null){ 
       $(this.element).height(y); 
      } 
      this._proportionallyResize(); 
     }, 

     _setOption: function(key, value) { 
      this.options[ key ] = value; 
      this._update(); 
     }, 

     _update: function() { 
      this._resize(
       this.options['x'], 
       this.options['y'] 
      ); 
     }, 

     _destroy: function() { 
      $.ui.resizable.prototype._destroy.call(this); 
     } 
    }); 
})(jQuery); 

要使用它

$('#myElement').mysizable('option', 'y', 100); 
$('#myElement').mysizable('option', 'x', 100);