Javascript jQuery UI可调整大小:是否以编程方式设置大小?
例如,用户输入宽度和高度值,告诉小部件调整大小到该尺寸。如何实现这一点Javascript jQuery UI可调整大小:是否以编程方式设置大小?,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,例如,用户输入宽度和高度值,告诉小部件调整大小到该尺寸。如何实现这一点 var w = prompt('width?')*1; var h = prompt('height?')*1; $('#resizable').css('width', w ); $('#resizable').css('height', h ); 在脚本中调整大小不需要使用jqueryui的Resizeable。css()方法适用于任何DOM元素。您还可以设置动画({width:500},1000)我用于以下代码: f
var w = prompt('width?')*1;
var h = prompt('height?')*1;
$('#resizable').css('width', w );
$('#resizable').css('height', h );
在脚本中调整大小不需要使用jqueryui的Resizeable。css()方法适用于任何DOM元素。您还可以
设置动画({width:500},1000)
我用于以下代码:
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);
我试过了。
$('#resizeable')
小部件确实调整了大小,但它在jQuery ui注入的$('#resizeable')
和$('.ui包装器')
之间留下了一个空白。当然我知道我也可以调整$('.ui wrapper')
的大小。我只是想知道是否有更优雅的方式来做到这一点。这不是一种常见的情况吗?当我尝试在控制台上运行此代码时,我不明白这一点:。。。没有空白。但是,是的,调整您需要调整的大小。不过,jQuery的resizeable中缺少setSize()方法确实让我觉得有点奇怪。