Die einzige Lösung, die ich gefunden habe, ist die maximale und minimale Höhe oder Breite mit dem aktuellen Wert einzustellen.Wie ändert man die Größe NUR horizontal oder vertikal mit jQuery UI Resizable?
Beispiel:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Aber das ist wirklich hässlich, vor allem, wenn ich das Elemente Höhe programmatisch ändern muß.
Sie die Resize-Set konnte handles option nur auf der linken und rechten zu zeigen (oder Ost/West), wie folgt aus:
foo.resizable({
handles: 'e, w'
});
Die Lösung ist Ihr resizable so zu konfigurieren, dass es bricht Änderungen der Dimension, die Sie nicht möchten.
hier ist ein Beispiel für nur vertikal resizable:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Während das Plakat vor allem für eine Horizontal nur gefragt wurde vergrößert, verkleinert, stellt sich die Frage für die vertikale fragen, auch.
Der vertikale Fall hat ein spezielles Problem: Sie haben möglicherweise eine relative Breite (z. B. 50%) festgelegt, die Sie beibehalten möchten, auch wenn das Browserfenster in der Größe geändert wird. Allerdings legt jQuery UI eine absolute Breite in px fest, sobald Sie das Element zum ersten Mal skalieren und die relative Breite verloren geht.
Wenn Sie den folgenden Code gefunden für diesen Anwendungsfall zu arbeiten:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Siehe auch http://jsfiddle.net/cburgmer/wExtX/ und jQuery UI resizable : auto height when using east handle alone
Sehr interessant, danke. Ich merke es mir. Ich denke, es ist wichtig zu bemerken, dass die Größe des resizierbaren Elements durch css festgelegt werden muss, wenn es nach der Größenänderung nicht verloren geht. Sehen Sie hier http://jsfiddle.net/paska/wExtX/10/ – Diego
Dies ist die Lösung, nach der ich gesucht habe. Aus irgendeinem Grund, obwohl das Handle für die Region deaktiviert ist, scheinen die Dimensionen immer noch auf px eingestellt zu sein. Wenn Sie diese Methode nicht verwenden, verlieren Sie Ihre% basierte Höhe oder Breite. – Serhiy
danke, ich habe eine Lösung. –
Eine sehr einfache Lösung:
$(".selector").resizable({ grid: [1, 10000] }); // horizontal
$(".selector").resizable({ grid: [10000, 1] }); // vertical
Das für ziehbar arbeitet() auch. Beispiel: http://jsfiddle.net/xCepm/
Ich wollte die Größe neu bestimmt die Breite, wenn Browser Wieder Größen ermöglichen, aber nicht, wenn der Benutzer die Größe des Elements ändert, diese fein gearbeitet:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Für mich Lösungen mit beiden Griffen und resize Handler hat gut funktioniert, so Benutzer sehen Griff, kann aber nur horizontal ändern, sollte ähnliche Lösung für die vertikale arbeiten. Ohne unteren rechten Handler Benutzer möglicherweise nicht bewusst, dass er Größe Element ändern kann.
Bei der Verwendung von ui.size.height = ui.originalSize.height; wird nicht ordnungsgemäß funktionieren wenn Element seine Größe vom Ausgangszustand geändert hat.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Für eine bessere Leistung $(this) entfernt werden könnte:
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>
Ich habe gerade einen Vorbehalt mit dieser Lösung.Es wird immer noch die Breite und Höhe als Inline-Stil gesetzt. Dies verursacht Probleme mit einer vertikalen Lösung. Sobald ich die Größe geändert habe, ist die Breite eingestellt und es ist nicht mehr 100% (aber ein px Wert). Setzen Sie das hier für den Fall, dass andere suchen und stoßen Sie darauf. – Fernker
@Fernker Ja, das ist ein Schmerz. – Ben
Sie erhalten eine prozentuale Breite zurück, wenn Sie Ihrem div Eigenschaften mit minimaler Breite und maximaler Breite mit demselben Wert geben. Es wird nicht überschrieben werden :) –