jQuery UI Resizable: set size programmatically?

后端 未结 3 848

For example, user inputs width and height values to tell the widget to resize to that dimension. How to implement this?

相关标签:
3条回答
  • 2021-01-15 10:54

    You can extend original Resizable widget like follow:

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

    To use it

    $('#myElement').mysizable('option', 'y', 100);
    $('#myElement').mysizable('option', 'x', 100);
    
    0 讨论(0)
  • 2021-01-15 11:05

    I use for this following code:

    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 );
    }
    
    0 讨论(0)
  • 2021-01-15 11:08
    var w = prompt('width?')*1;
    var h = prompt('height?')*1;
    $('#resizable').css('width', w );
    $('#resizable').css('height', h );
    

    You don't need to use jqueryui's resizable in order to resize it in script. The jQuery .css() method applies for any DOM element. You can also animate({width: 500},1000).

    0 讨论(0)
提交回复
热议问题