1

我的 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>
4

0 回答 0