我在stackoverflow（jsfiddle）上找到了一个很好的分离器。由于所有尺寸均以像素为单位设置，因此响应不是很好。所以我将它们更改为百分比（jsfiddle）。现在，如果您移动拆分器，然后尝试更改窗口大小，它仍然会中断。
为了解决这个问题，我尝试在window对象上添加一个侦听器
$(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可调整大小”类。希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句