Question

我的jquery标签容器在每个标签中都有一个iframe。在页面刷新时，用户以前选择的选项卡和iframe可以很好地加载。其他选项卡中的iframe仅在选中其选项卡时才会加载。问题是，当Pace进度条使用第一个选项卡进行页面刷新时，当在第一次加载iframe的其他选项卡之间切换时，它会失败。相关代码位于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 个答案: