2011-11-15 10 views
8

Stavo cercando di attivare/disattivare le proporzioni in modo dinamico in JQueryUI ridimensionabile, tuttavia, anche dopo aver impostato l'opzione su false, mantiene le proporzioni. Di seguito è riportato il codice Attualmente sto lavorando con:Impossibile applicare AspectRatio ridimensionabile JqueryUI dopo l'inizializzazione?

$('#aspect_check').click(function() { 
    var ischecked = $('#aspect_check').prop('checked'); 
    if (ischecked) { 
    $("#resizable").resizable("option", "aspectRatio", .75); 
    } else { 
     $("#resizable").resizable("option", "aspectRatio", false); 
    } 
}); 

ho trovato un bug report da 3 anni fa, che sembra che ancora non è stato risolto nonostante la marcatura è critica. http://bugs.jqueryui.com/ticket/4186

Le soluzioni alternative non funzionano con le versioni più recenti. Qualche idea?

Edit: Dopo aver attraversato un sacco di segnalazioni di bug, ecco un lavoro intorno:

$(function() { 
$.extend($.ui.resizable.prototype, (function (orig) { 
    return { 
     _mouseStart: function (event) { 
      this._aspectRatio = !!(this.options.aspectRatio); 
      return(orig.call(this, event)); 
     } 
    }; 
})($.ui.resizable.prototype["_mouseStart"])); 
}); 

incollarlo nella vostra sezione di script javascript. Spero che aiuti qualcuno con problemi simili!

+0

tua modifica opere! Grazie – willDaBeast

+0

La soluzione alternativa funziona solo con 'originalPosition' positivo. Qualche idea su come farlo funzionare anche con un valore negativo? – Core972

risposta

1

Non so se funzionerà o cosa accadrà. Ma puoi provare qualcosa come questo.

$(function(){ 
    var settings = { 
     aspectRatio : .75 
    }; 
    $("#tadaa").resizable(settings); 

    $("input").change(function(){ 
     if($(this).is(":checked")) 
     { 

      $("#tadaa").resizable("destroy"); 
      $("#tadaa").resizable(); 
     } 
     else 
     { 
      $("#tadaa").resizable("destroy"); 
      $("#tadaa").resizable(settings); 
     } 
    }); 
}); 

Demo online, al momento solo l'elemento trascinabile fondo è uno stile da usare, div orizzontale non è in stile.

http://jsfiddle.net/t6xFN/1/

+0

Grazie per la risposta @Niels, l'esempio non sembra funzionare :(. Mostra lo stesso effetto di impostarlo manualmente, ma dopo aver attraversato ore di bug report, ho finalmente trovato un altro work-around. domanda originale per altri nella stessa scarpa Grazie ancora! – Alvin

2

mi rendo conto che questo è un vecchio post, ma nel caso in cui qualcuno ha bisogno ancora di una risposta si può fare in questo modo:

$('#aspect_check').click(function() { 
    var ischecked = $('#aspect_check').prop('checked'); 
    if (ischecked) { 
     $("#resizable").resizable({aspectRatio : .75}); 
    } else { 
     $("#resizable").resizable(); 
    } 
}); 
0

Un'altra soluzione è quella di salvare le opzioni ridimensionabili in una variabile e distruggere e reinizializzare il widget con le opzioni aggiornati:

var options = $("#resizable").resizable("options"); 
if (ischecked) { 
    options.aspectRatio = .75; 
} else { 
    options.aspectRatio = false; 
} 
$("#resizable").resizable("destroy"); 
$("#resizable").resizable(options); 
10

Questo ha funzionato per me, senza l'applicazione di patch

$('#resizable') 
    .resizable('option', 'aspectRatio', false) 
    .data('uiResizable')._aspectRatio = false; 

Questa parte .data('uiResizable')._aspectRatio = false; viene in soccorso

+1

Eccellente mod, mi ha portato fuori da un problema! – Erick