jQuery UI, de tamaño variable, a dejar de cambio de tamaño en el evento de cambio de tamaño

Usando jQuery UI, de tamaño variable, estoy tratando de no cambiar el tamaño basado en diversas normas. El built-in de contención característica no parece funcionar correctamente con los elementos con posición absoluta, y que iba a necesitar algo más flexible que el de todos modos.

Tener algo como esto:

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

¿Cómo puedo saber la «interfaz de usuario» objeto de no cambiar el tamaño?

Gracias.

Fueron capaces de resolver esto?
Tuve problemas con el DOM demasiado hasta llegar me puse el elemento de contención para posicionamiento relativo.

OriginalEl autor pbz | 2011-02-23

8 Kommentare

  1. 18

    Es muy simple, echa un vistazo a este código para resizeable flotante ‘izquierda’ div columnas con ancho de fijación y los límites para cada uno de los otros.

    var maxWidthOffset, total2Width;
            $('#'+this.id).find('ul:not(:last)').resizable({
                handles: 'e',
                ghost: true,
                delay: 200,
                helper: "overmoused",
                minWidth: 20,
                start: function(e, ui) {
                    maxWidthOffset = ui.element.next().width()-20;
                    total2Width = ui.element.width()+maxWidthOffset+20;
                },
                resize: function(e, ui) {
                    if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
                        $(this).resizable('widget').trigger('mouseup');
                    }
                },
                stop: function(e, ui) {
                    var w;
                    if (ui.originalSize.width > ui.size.width) {
                        w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
                        ui.element.next().width(w>20 ? w : 20);
                    } else {
                        w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
                        ui.element.next().width(w>20 ? w : 20);
                    }
                    ui.element.width(total2Width-ui.element.next().width());
                }
            });
    el mouseup funciona bien 🙂
    sí mouseup buenas obras. No entiendo por qué jqueryui equipo no añadir este tipo de características útiles para la api. Siempre necesito hackear algo cuando se trabaja con jqueryui.

    OriginalEl autor Alexey

  2. 9

    No hay standart opción para detener el cambio de tamaño en esta versión.
    Usted puede deshabilitar el tamaño variable, pero seguirá cambio de tamaño y se detendrá la opción de cambiar el tamaño sólo en la próxima vez que lo intente.

    $(".selector").resizable("disable");

    De todos modos he encontrado que se puede limitar el tamaño usando el maxWidth y maxHeight propiedad directamente desde el Evento Resize.

    $(".selector").resizable({
        aspectRatio: true,
        handles: 'all',
        resize: function( event, ui ){
            if(x > y){
                (".selector").resizable("option","maxWidth",ui.size.width);
                return;
            }
        }
    });
    Este es el más respuesta correcta para dejar de redimensionar basado en diversas normas. A pesar de que me gustaría utilizar $(this) en el interior de evento de cambio de tamaño y no $(‘.selector’)
    definitivamente el camino a seguir y también más simple/limpiador de Alexey la respuesta

    OriginalEl autor Roy Shoa

  3. 7

    Acaba de establecer la interfaz de usuario propiedades directamete en el evento de cambio de tamaño. (También se puede hacer esto en el evento de detención si se prefiere):

    $(".selector").resizable({
        resize: function(event, ui) {
            //set directly
            ui.size.height = 150;
            ui.size.width = 150;
        }
    });
    
    $(".selector2").resizable({
        resize: function(event, ui) {
            //return value from another function
            restrictSize(ui);
        }
    });
    
    function restrictSize(ui) {
        maxheight = 250;
        maxwidth = 300;
    
        ui.size.height = ui.size.height > maxheight ? maxheight : ui.size.height;
        ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
    }

    Usted puede hacer lo mismo con el posicionamiento también, por supuesto.

    Ver este violín: http://jsfiddle.net/dtwist/PrEfd/

    su respuesta es exactamente lo que yo quería saber: «cómo establecer el tamaño DURANTE el cambio de tamaño?». gracias, me salvo algunos problemas

    OriginalEl autor David Twist

  4. 1

    No parece ser posible con la versión actual.

    OriginalEl autor pbz

  5. 1

    El respondió que recoge lo correcto no es del todo correcto. Este es alcanzable:

    Utilizar un inútil ayudante para detener el cambio de tamaño se producen en el evento de cambio de tamaño:

    $( ".selector" ).resizable({
      resize: function(event, ui) { 
        //resize $(this) as you wish
      },
      helper: $("</div>")
    });

    En el evento de cambio de tamaño alterar el tamaño variable de las dimensiones y la posición que usted desea. Usted todavía tiene un problema con el evento de detención. Justo antes de la parada evento se activa, jquery cambia el tamaño de tu elemento – que usted no desea. Todo lo que puedes hacer es restablecer el estado del objeto, ya que era la última vez que el evento de cambio de tamaño de bonificación. Así, en el evento de detención puede restablecer su tamaño variable, dimensiones y posición de la que fueron creadas por usted en el último ‘resize’ evento que desencadena. Para ello será necesario declarar algunas variables en un contexto superior, o el uso de jquery.de datos() método de su elección (incluso puede crear una invisible clon del objeto en su totalidad, si que me parece más cómodo para usted). He aquí un resumen de la final de la estructura del código:

    $( ".selector" ).resizable({
      resize: function(event, ui) { 
        //resize $(this) as you wish and then save the dimensions and positions to some variables declared in a higher context
      },
      helper: $("</div>"),
      stop: function(){
        //restore $(this) position and location as it was last set in the resize event
      }
    });

    OriginalEl autor Radu Simionescu

  6. 1

    Supongo que se podría hacer algo como que:

    $(Selector).css(“min-hight”,Size);
    $(Selector).css(“max-hight”,Size);

    OriginalEl autor Alaeddin Hussein

  7. 0

    Ha sido mucho tiempo, pero hay una solución a este problema en el caso de que alguien lea esto.

    Sólo se necesita para establecer el maxWidth o minWidth (depende de lo que quieras hacer) dentro de la resize para que deje de cambio de tamaño.

    Puede hacer algo como lo siguiente:

    minWidth: 300,
    start: function(event, ui) {
        //get it once so we don't get it hundreds of time inside resize
        this.enforcedMinWidth = $(this).resizable("option", "minWidth");
    },
    resize: function(event, ui) {
        //use whatever conditions you want to stop here
        //in my original case, i was checking its width vs neighbor and
        //stops the resizing accordingly, so change it to fit your case
        if (ui.element.next().width() <= this.enforcedMinWidth) {
            $(this).resizable("option", "maxWidth", ui.size.width); 
        }
    },
    stop: function(event, ui) {
        //reset
        $(this).resizable("option", "maxWidth", null);
        //cleanup
        delete this.enforcedMinWidth;
    }

    OriginalEl autor codenamezero

  8. 0

    Hay una torpe manera de la intercepción de ambos start y resize:

    resize: function(event, ui) {
        if (RULE) {
            $(this).resizable('widget').trigger('mouseup');
            var save = window.savePosition;
            save.width  += 4;
            save.height += 4;
            $(ui.helper).css(save);
            return;
        }
    },
    start: function(event, ui) {
        if (RULE) {
            window.savePosition = $.extend({ }, ui.size, ui.position);
        }
    }

    Por desgracia no es un 4 píxeles de la «frontera» en el controlador de cambio de tamaño, así que tienes que aplicar una pequeña corrección para evitar que el tamaño variable de la zona «saltar» al abortar la operación de cambio de tamaño.

    Esta solución vuelve a la guarde a la posición inicial, suponiendo que la misma REGLA se aplica en todo momento. Usted puede, por supuesto, la adaptación de este al no guardar la posición inicial y el tamaño, pero volver a calcular sobre la marcha durante el cambio de tamaño. En ese caso, usted no tiene que interceptar start.

    OriginalEl autor LSerni

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea