Индикатор выполнения темпа работает только при обновлении контейнера вкладок

Мой контейнер вкладок jquery содержит iframe на каждой вкладке. При обновлении страницы приятно выбираются ранее выбранные пользователем вкладка и iframe. Фреймы в других вкладках загружаются только тогда, когда выбрана их вкладка. Проблема заключается в том, что, хотя индикатор выполнения Pace работает при обновлении страницы с первой вкладкой, он не работает при переключении между другими вкладками, в которые фреймы загружаются впервые. Соответствующий код находится в нижней части jquery. Я пытался "форсировать" индикатор выполнения с помощью Pace.start, а также оборачивать содержимое, но ничего не работает. Любая помощь высоко ценится. http://jsfiddle.net/p8zhkk8o/

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.10.3/jquery-ui.js
https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js


$(function() {
$(document).ajaxStart(function() { Pace.restart(); });

// Get previously selected iframe
var $panels = $("[id^='Table']").each(function(index) {
    $(this).on('loadContent', function(e) { // 'loadContent' custom event
        // var panel = this;
        var src = $("#RH_TabsTable li a").get(index).rel;
        if (!$(this).find('iframe').length) {
            $(this).html('<div class="tabIframeWrapper"><iframe class="iframetab" width="2000" scrolling="yes" src="' + src + '"></iframe></div>').find('iframe').height($(window).height() - 80);
        }
    });
});

$('#RH_TabsTableShell').tabs({
    'active': window.localStorage.getItem('selectedTab') || 0,
    'activate': function(event, ui) {


// ==============================================
// Pace not working here!!

// Tell the panel to load its content (if not already loaded)
        ui.newPanel.trigger('loadContent');

        window.localStorage.setItem('selectedTab', ui.newTab.index());
    },
    'create': function(event, ui) {

// Tell the initial panel to load its content (if not already loaded).
        ui.panel.trigger('loadContent'); 
    }
});

})




<div id="RH_TabsTableShell">
<ul id="RH_TabsTable" class="nav nav-tabs">
<li><a class="tabref" href="#Table1" rel="https://bing.com">Table1</a></li>
<li><a class="tabref" href="#Table2" rel="https://jsfiddle.net">Table2</a>
</li>
<li><a class="tabref" href="#Table3" rel="https://jqueryui.com/demos/tabs">Table3</a></li>
</ul>

<div id="Table1"></div>
<div id="Table2"></div>
<div id="Table3"></div>
</div>

0 ответов

Другие вопросы по тегам