JQuery UI: Resize также вызывает изменение размера на `окна`

0

Я нашел этот красивый сплиттер здесь в qaru.site/questions/3959415/... (jsfiddle). Поскольку все размеры заданы в пикселях, это не очень ответ. Поэтому я изменил их на проценты (jsfiddle). Теперь, если вы перемещаете сплиттер, а затем попытайтесь изменить размер окна, он все равно ломается.

Чтобы исправить это, я попытался добавить слушателя к объекту окна

$(window).on('resize', function () {
    /* reset width of both elements to percentages */
});

jsfiddle

Этот код следует запускать только при изменении размера окна. К сожалению, это также называется, когда jquery-ui запускает событие 'resize'. Любые предложения о том, как остановить распространение этого события при запуске jquery-ui?

Если у вас уже есть отзывчивый сплиттер, сообщите мне!

  • 0
    event.stopPropagation () может помочь
  • 0
    Вы можете подумать, что, но это не сработало, посмотрите этот jsfiddle
Теги:
jquery-ui-resizable

1 ответ

1
Лучший ответ

Чтобы вызвать код только при изменении размера окна, вы можете попробовать использовать 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" на элементы привязки. Надеюсь это поможет.

  • 0
    абсолютно. Но есть ли у вас объяснение, почему это событие нельзя остановить?
  • 0
    Вот и все: bugs.jqueryui.com/ticket/9580
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню