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

问题描述：

例如，用户输入宽度和高度值以告知小部件调整到该维度。如何实现这一点？jQuery UI可调整大小：以编程方式设置大小？

答

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

我试过了。 '$（'＃resizable'）'小部件确实被调整了大小，但是在'$（'＃resizable'）'和'jQuery UI注入的$（'。ui-wrapper'）'之间留下了空白区域。当然我知道我也可以调整'$（'。ui-wrapper'）'的大小。我只是想知道是否有更优雅的方式来做到这一点。这不是常见的情况吗？ – user949952

当我尝试在此页面的控制台上运行此代码时，我不明白：http://jqueryui.com/demos/resizable/ ...没有空白。但是，是的，调整任何你需要调整大小。虽然jQuery可调整大小的setSize（）方法的缺失确实让我觉得有点奇怪。 –

答

我用这个下面的代码：

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

答

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

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

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

相关推荐