Boostrap带扭曲的Ajax选项卡

我正在努力获得以下结果。一个用户浏览标签，但他没有看到重新进入同一页面时的加载效果（当然这是因为默认值被加载器覆盖了） - 但是我怎样才能用一个加载器覆盖.load（）DOM非活动标签[简化::离开标签时清除内容]。Boostrap带扭曲的Ajax选项卡

我的基本尝试。从jax页面重新进入时，第一个选项卡不起作用，但它不是在我的页面上正常运行的情况。

TLDR - 离开活动标签

简单的jQuery

$('#myTabs a').click(function(e) { 
    e.preventDefault(); 
    $.ajaxSetup({ 
    'cache': true 
    }); 
    var url = $(this).attr("data-url"); 
    var href = this.hash; 
    var pane = $(this); 
    $(href).load(url, function(result) { 
    pane.tab('show'); 

    }); 
});

而且一个例子

https://jsfiddle.net/074rk3re/4/

来源

2016-06-11 Kavvson Empcraft

阿贾克斯自举标签后，更换内容，原创内容（装载机）[联系LTE模板]带状态保存

好吧我想通了:)发布以防万一有人会需要它也很有用。如果需要，也请重建我的问题。

出发

我用这两个变量，以保持点击标签，前一个标签的轨道清除DOM与装载机

var targetel = $(e.target).filter($(this).attr('href')); 
var prevel = $(e.relatedTarget).filter($(this).attr('href'));

接下来，我增加了一个短的睡眠对于AJAX呼叫。 [Todo也许：在树形时间快速设置标签的时候，它们不会取消加载，后面会加载一个xhr请求，这有点毫无意义，您知道如何防止这种情况发生？ ]

然后我添加了加载程序元素。由于第一次加载时没有以前的元素，所以需要有一个条件。不知道它是一种适当的方式来上下文，但它的工作原理。

$(targ).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>'); 
    if (prevel.context) { 
    $(prevel.context.hash).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>'); 
    }

另外花哨的工作人员，我没有发布作为一个问题是刷新浏览器后的活动选项卡的状态保存。我强制点击 - 因为它是xhr内容，所以我猜想只有选项，并将其保存到localStorage。这种状态保存将在您选择一个选项卡后生效。默认情况下没有选择，如果你想拥有，所以你可以做这样的事情

$('#myTabs > li > a[href="' + activeTab + '"]').trigger('click');

其中activeTab将是链接的ID在<li>。

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) { 
    localStorage.setItem('activeTab', $(e.target).attr('href')); 
}); 
var activeTab = localStorage.getItem('activeTab'); 
if (activeTab) { 
    $('#myTabs > li > a[href="' + activeTab + '"]').trigger('click'); 
}

就是这样，如果您有任何建议，请写信。

可以在这里

https://jsfiddle.net/074rk3re/9/

的完整代码

来源

2016-06-11 20:17:15

Boostrap带扭曲的Ajax选项卡

回答

相关问题