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

例如，用户输入宽度和高度值以告诉窗口小部件resize到该维度。 怎么实现这个？

Answer 1

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

您不需要使用jqueryui的resizable来在脚本中调整它的大小。 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

您可以扩展原始Resizable小部件，如下所示：

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