如何使用Bootstrap选项卡加载AJAX？

Question

我使用了bootstrap-tabs.js,它运行得很好.

但我没有找到有关如何通过AJAX请求加载内容的信息.

那么,如何使用bootstrap-tabs.js加载AJAX？

Answer 1

在Bootstrap 2.0及更高版本中,您必须绑定到"show"事件.

这是HTML和JavaScript的示例:

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li><a href="#home"  class="active" data-toggle="tab">Home</a></li>
        <li><a href="#foo" data-toggle="tab">Foo</a></li>
        <li><a href="#bar" data-toggle="tab">Bar</li>
    </ul>
    <div>
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="foo"></div>
        <div class="tab-pane" id="bar"></div>
    </div>
</div>

JavaScript的:

$(function() {
    var baseURL = 'http://yourdomain.com/ajax/';
    //load content for first tab and initialize
    $('#home').load(baseURL+'home', function() {
        $('#myTab').tab(); //initialize tabs
    });    
    $('#myTab').bind('show', function(e) {    
       var pattern=/#.+/gi //use regex to get anchor(==selector)
       var contentID = e.target.toString().match(pattern)[0]; //get anchor         
       //load content for selected tab
       $(contentID).load(baseURL+contentID.replace('#',''), function(){
            $('#myTab').tab(); //reinitialize tabs
       });
    });
});

我在这里写了一篇关于它的帖子:http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/

Answer 2

您可以change在事件处理程序中侦听事件和ajax加载内容

$('.tabs').bind('change', function (e) {
    var now_tab = e.target // activated tab

    // get the div's id
    var divid = $(now_tab).attr('href').substr(1);

    $.getJSON('xxx.php').success(function(data){
        $("#"+divid).text(data.msg);
    });
})

Answer 3

我想通过Ajax将完全动态的php页面加载到选项卡中.例如,我希望链接中有$ _GET值,基于它是哪个选项卡 - 如果您的选项卡是动态的,例如基于数据库数据,这将非常有用.找不到任何与之相关的东西,但我确实设法编写了一些实际可行的jQuery并完成了我正在寻找的东西.我是一个完整的jQuery noob,但这是我如何做到的.

1. 我创建了一个名为tabajax的新"数据切换"选项(而不仅仅是tab),这使我能够分离出什么是ajax和什么是静态内容.
2. 我创建了一个基于该数据切换运行的jQuery代码段,它不会弄乱原始代码.

我现在可以将url.php？value = x加载到我的Bootstrap选项卡中.

如果您愿意,请随意使用,代码如下

jQuery代码:

$('[data-toggle="tabajax"]').click(function(e) {
    e.preventDefault()
    var loadurl = $(this).attr('href')
    var targ = $(this).attr('data-target')
    $.get(loadurl, function(data) {
        $(targ).html(data)

    });
    $(this).tab('show')
});

HTML:

<li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>

所以在这里你可以看到我已经改变了bootstrap加载的方式,我使用动态ajaxlink的href,然后将一个'data-target'值添加到链接,那应该是你的目标div(tab-content) .

因此,在选项卡内容部分中,您应该为此示例创建一个名为val1的空div.

空Div(目标):

<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>

希望这对某人有用:)

Answer 4

我建议将uri放入tab-pane元素中,它允许利用web框架反向url fonctionnalities.它还允许完全依赖于标记

<ul class="nav nav-tabs" id="ajax_tabs">
  <li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
  <li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="ajax_login"
    data-target="{% url common.views.ajax_login %}"></div>
  <div class="tab-pane" id="ajax_registration"
    data-target="{% url common.views.ajax_registration %}"></div>
</div>

这是javascript

function show_tab(tab) {
    if (!tab.html()) {
        tab.load(tab.attr('data-target'));
    }
}

function init_tabs() {
    show_tab($('.tab-pane.active'));
    $('a[data-toggle="tab"]').on('show', function(e) {
        tab = $('#' + $(e.target).attr('href').substr(1));
        show_tab(tab);
    });
}

$(function () {
    init_tabs();
});

我加载活动选项卡,并仅在尚未加载选项卡时加载选项卡