L'unica soluzione che ho trovato è impostare l'altezza e la larghezza massima e minima con il valore corrente.Come ridimensionare SOLO orizzontalmente o verticalmente con l'interfaccia utente jQuery ridimensionabile?
Esempio:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
ma questo è davvero brutto, soprattutto se devo cambiare l'altezza dell'elemento di programmazione.
È possibile impostare il ridimensionamento handles option per mostrare solo sulla sinistra e sulla destra (o est/ovest), in questo modo:
foo.resizable({
handles: 'e, w'
});
La soluzione è quella di configurare il ridimensionabile in modo cancella cambiamenti della dimensione che non vuoi.
qui è un esempio di solo verticalmente ridimensionabile:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Mentre il manifesto è stato principalmente chiedendo un orizzontale solo ridimensionare, la questione non chiede in verticale, anche.
Il caso verticale presenta un problema particolare: potrebbe essere stata impostata una larghezza relativa (ad esempio 50%) che si desidera mantenere anche quando viene ridimensionata la finestra del browser. Tuttavia, l'interfaccia utente di jQuery imposta una larghezza assoluta in px dopo aver ridimensionato per la prima volta l'elemento e perso la larghezza relativa.
Se trovato il seguente codice di lavorare per questo caso d'uso:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Vedi anche http://jsfiddle.net/cburgmer/wExtX/ e jQuery UI resizable : auto height when using east handle alone
Molto interessante, grazie. Lo terrò a mente. Penso che sia importante notare che l'elemento ridimensionabile deve avere la sua larghezza impostata da css se non verrà perso dopo il ridimensionamento. Vedi qui http://jsfiddle.net/paska/wExtX/10/ – Diego
Questa è la soluzione che stavo cercando. Per qualche motivo, anche se l'handle è disabilitato per la regione, le dimensioni sembrano essere ancora impostate su px. Se non utilizzi questo metodo, perdi l'altezza o la larghezza in base a%. – Serhiy
grazie, ho una soluzione. –
una soluzione molto semplice:
$(".selector").resizable({ grid: [1, 10000] }); // horizontal
$(".selector").resizable({ grid: [10000, 1] }); // vertical
Questo funziona per trascinabili() anche. Esempio: http://jsfiddle.net/xCepm/
volevo permettere ridimensionare la larghezza quando il browser ri-formati, ma non quando l'utente cambia la dimensione di elemento, questo ha funzionato bene:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Per me le soluzioni con entrambe le maniglie e il gestore resize ha funzionato correttamente, quindi l'utente può visualizzare l'handle ma può ridimensionare solo orizzontalmente, soluzione simile dovrebbe funzionare per verticale. Senza l'operatore in basso a destra, , l'utente potrebbe non essere a conoscenza dello che può ridimensionare l'elemento.
Quando si utilizza ui.size.height = ui.originalSize.height;, il non funzionerà correttamente se l'elemento ha modificato la sua dimensione dallo stato iniziale.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Per ottenere migliori prestazioni $(this) potrebbero essere rimossi:
var foo = jQuery('#foo');
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
foo.css("height", '');
}
});
Successfully working div position Vertically and horizontally
-------------------------------------------------------------
<head>
<style>
.resizable {
height: 100px;
width: 500px;
background: #09C;
}
.resizable-x {
height: 100px;
width: 500px;
background: #F60;
}
</style>
<script>
$(function() {
$(".resizable").resizable({
grid: [10000, 1]
});
$(".resizable-x ").resizable({
grid: [1, 10000]
});
$(".resizable").draggable();
});
});
</script>`enter code here`
</head>
<body>
<div class="resizable"></div>
<div class="resizable-x"></div>
</body>
ho appena trovato un avvertimento con questa soluzione.Metterà comunque la larghezza e l'altezza quando è fatto come uno stile in linea. Questo sta causando problemi per me con una soluzione solo verticale. Una volta ridimensionato, la larghezza viene impostata e non è più 100% (ma un valore px). Mettilo qui solo nel caso in cui altri lo stiano cercando e lo incontrino. – Fernker
@Fernker Sì, è un dolore. – Ben
è possibile ottenere una larghezza percentuale se si assegnano proprietà min-larghezza e larghezza massima dello stesso valore al div. Non verrà sovrascritto :) –