Единственное решение, которое я нашел, - установить максимальную и минимальную высоту или ширину с текущим значением.
Пример:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Но это действительно некрасиво, особенно если мне нужно программно изменить высоту элемента.
Ответы:
Вы можете установить изменения размера handlesопцию , чтобы показывать только на левой и правой (или восток / запад), как это:
foo.resizable({
handles: 'e, w'
});
Хотя плакат в основном просил изменить размер только по горизонтали, вопрос действительно касается и вертикального.
Вертикальный случай имеет особую проблему: вы могли установить относительную ширину (например, 50%), которую хотите сохранить даже при изменении размера окна браузера. Однако пользовательский интерфейс jQuery устанавливает абсолютную ширину в пикселях, как только вы сначала измените размер элемента, и относительная ширина будет потеряна.
Если обнаружен следующий код для этого варианта использования:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
См. Также http://jsfiddle.net/cburgmer/wExtX/ и jQuery UI с изменяемым размером: автоматическая высота при использовании только восточного маркера
px.
heightчтобы ''в resizeи stopобработчиков)
Очень простое решение:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Это также работает для draggable (). Пример: http://jsfiddle.net/xCepm/
{handles: 'se', grid: [10000, 1], autoHide: true}
Решение состоит в том, чтобы настроить ваш размер так, чтобы он отменял изменения размера, который вам не нужен.
вот пример изменения размера только по вертикали:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Я хотел разрешить изменение ширины при изменении размера браузера, но не тогда, когда пользователь изменяет размер элемента, это сработало нормально:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Для меня решения с ручками и resizeобработчиком работали нормально, поэтому пользователь видит дескриптор, но может изменять размер только по горизонтали, аналогичное решение должно работать для вертикального. Без нижнего правого обработчика пользователь может не знать, что он может изменять размер элемента.
При использовании ui.size.height = ui.originalSize.height;он не будет работать должным образом, если элемент изменил свой размер по сравнению с исходным состоянием.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Для лучшей производительности $(this)можно было удалить:
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>