window.resize, как ждать показа вкладки

Question

У меня есть несколько вкладок, и у каждой вкладки есть tables от slickgrid библиотеки таблиц.

Каждый раз при переходе на другую вкладку.Макет фоновой вкладки свернут.

Если вы идете так.

TabA-> TabB-> TabA (макет свернут)

Я сделал функцию, которая исправляет макетзапускается resize, но при переходе на другую вкладку не срабатывает resize.

Поэтому мне нужно вызывать windows resize этим $(window).trigger('resize'), когда я нажимаю tab.

<a class="nav-link active" id="headlineTab" data-toggle="tab" href="#head" onClick="$(window).trigger('resize');">head</a>

Однако он срабатывает до того, как отображается все содержимое вкладки, поэтому формат таблицы не является фиксированным.Если вы нажмете вкладку дважды.это исправляет.

Как я могу ждать, пока все содержимое вкладки будет показано ??

(Кстати, когда я использую скользкую карусель. Фоновый слайд не свернут. Это интересно);

Answer 1

Та же проблема, что и у меня, была при инициализации карт Google внутри содержимого вкладки.Это было пару лет назад, поэтому в то время мы использовали вкладки пользовательского интерфейса jquery.Я думаю, вам будет проще показать некоторые фрагменты логики, а не полное решение вашей проблемы.

Проверка видимости родителя активного контента:

• при отображении используйте размеры родительского ИЛИ используйте соотношение сторон в случае видео, карт Google или другого свернутого содержимого
• при невидимости , как правило, повторно активируйте

Некоторые фрагменты логики:

activate: function () {
    if (google && this.map.length) {
        this.calculateMap();
        this.renderMap(this.coords);
    }
},

// google maps or your content inside a tab
cacheItems: function (cache, data) {
    this.map = this.container.find('.google-maps').eq(0);
    this.onParent = this.map.closest('.ui-tabs-panel'); // find the tab panel
},

calculateMap: function () {
    var self = this,
        parent = this.map.parent(),
        w, h, id, el;

    if (parent.is(':visible')) {
        w = parent.outerWidth(false);
        h = w * 9/16;
        this.map.css({ width: w, height: h });
    } else {
        id = this.onParent.prop('id');
        el = this.onParent.prevAll().find('a[href=#' + id + ']'); // find the tab trigger

        // generic single time event to re-activate
        el.one('click', function() {
            setTimeout(function() {
                self.activate();
            }, 200);
        }.bind(this)); // rebind the scope
    }
},

Теперь вы упомянули, что должны вызывать событие изменения размера на ваших вкладках.Это именно то, что я делаю и здесь.За исключением того, не связывайте это по клику, поскольку это будет продолжаться.Вместо этого инициализируйте ваши вкладки в DOM ready.

Некоторая логика tabs.js:

this.containers = $('.ui-tabs[data-class="tabs"]'); // added my own data-class here in HTML

activate: function () {
    var options = $.extend({}, {
        heightStyle: 'content'
    }, {
        activate: function () {
            $(window).trigger('resize');
        }
    });

    this.containers.tabs(options);
}

Так что я надеюсь, что моя логика вам ясна, поэтому вы можете применить нечто подобное в своем кодеили что вы уже пробовали.