Я нашел этот красивый сплиттер здесь в qaru.site/questions/3959415/... (jsfiddle). Поскольку все размеры заданы в пикселях, это не очень ответ. Поэтому я изменил их на проценты (jsfiddle). Теперь, если вы перемещаете сплиттер, а затем попытайтесь изменить размер окна, он все равно ломается.
Чтобы исправить это, я попытался добавить слушателя к объекту окна
$(window).on('resize', function () {
/* reset width of both elements to percentages */
});
Этот код следует запускать только при изменении размера окна. К сожалению, это также называется, когда jquery-ui запускает событие 'resize'. Любые предложения о том, как остановить распространение этого события при запуске jquery-ui?
Если у вас уже есть отзывчивый сплиттер, сообщите мне!
Чтобы вызвать код только при изменении размера окна, вы можете попробовать использовать e.target.
Демо: http://jsfiddle.net/lotusgodkk/8qzTJ/740/
$(function () {
var el1, el2;
$(".resizable1").resizable({
handles: 'e',
minWidth: '50',
resize: function (event) {
var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
divTwo = $(this).next(),
divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
divTwo.width(divTwoWidth);
el1 = $(this);
el2 = divTwo;
event.stopPropagation();
//event.preventDefault();
return false;
}
});
$(window).on('resize', function (e) {
console.log($(e.target).hasClass('ui-resizable'));
if (!$(e.target).hasClass('ui-resizable')) {//Check whether the target has class "ui-resizable".
console.log('window');
if (el1 && el2) {
el1.width('50%');
el2.width('50%');
}
}
});
});
Здесь перед выполнением функции изменения размера я проверяю, имеет ли цель класс "ui-resizable". jQuery добавляет класс "ui-resizable" на элементы привязки. Надеюсь это поможет.