Giải pháp duy nhất mà tôi đã tìm thấy là đặt chiều cao hoặc chiều rộng tối đa và tối thiểu với giá trị hiện tại.
Thí dụ:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Nhưng điều này thực sự xấu, đặc biệt nếu tôi phải thay đổi chiều cao của phần tử theo lập trình.
Câu trả lời:
Bạn có thể đặt handlestùy chọn thay đổi kích thước để chỉ hiển thị ở bên trái và bên phải (hoặc phía đông / phía tây), như sau:
foo.resizable({
handles: 'e, w'
});
Trong khi người đăng chủ yếu yêu cầu thay đổi kích thước theo chiều ngang, câu hỏi cũng yêu cầu chiều dọc.
Trường hợp dọc có một vấn đề đặc biệt: Bạn có thể đã đặt chiều rộng tương đối (ví dụ: 50%) mà bạn muốn giữ lại ngay cả khi cửa sổ trình duyệt được thay đổi kích thước. Tuy nhiên, giao diện người dùng jQuery đặt chiều rộng tuyệt đối bằng px khi bạn đổi kích thước phần tử lần đầu tiên và chiều rộng tương đối bị mất.
Nếu tìm thấy mã sau hoạt động cho trường hợp sử dụng này:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Xem thêm http://jsfiddle.net/cburgmer/wExtX/ và giao diện người dùng jQuery có thể thay đổi kích thước: chiều cao tự động khi chỉ sử dụng tay cầm ghi đông
px.
heightđể ''ở resizevà stopxử lý)
Một giải pháp rất đơn giản:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Điều này cũng hoạt động cho draggable (). Ví dụ: http://jsfiddle.net/xCepm/
{handles: 'se', grid: [10000, 1], autoHide: true}
Giải pháp là định cấu hình có thể thay đổi kích thước của bạn để nó hủy các thay đổi của thứ nguyên bạn không muốn.
đây là một ví dụ về chỉ có thể thay đổi kích thước theo chiều dọc:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Tôi muốn cho phép kích thước lại chiều rộng khi trình duyệt kích thước lại, nhưng không phải khi người dùng thay đổi kích thước của phần tử, điều này hoạt động tốt:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Đối với tôi, các giải pháp có cả tay cầm và resizetrình xử lý đều hoạt động tốt, vì vậy người dùng thấy tay cầm nhưng chỉ có thể thay đổi kích thước theo chiều ngang, giải pháp tương tự sẽ hoạt động cho chiều dọc. Nếu không có trình xử lý phía dưới bên phải, người dùng có thể không biết rằng anh ta có thể thay đổi kích thước phần tử.
Khi sử dụng ui.size.height = ui.originalSize.height;nó sẽ không hoạt động bình thường nếu phần tử thay đổi kích thước của nó từ trạng thái ban đầu.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Để có hiệu suất tốt hơn $(this)có thể bị xóa:
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>