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);