单击时正在加载 Bootstrap 药丸内容

Question

我目前有一个页面有四个 Bootstrap 药丸标签。与这些选项卡中的每一个相关联的内容都相当大 tables。因此，在加载网站时，所有内容都在加载，因此速度非常慢。我想更改它，以便每个选项卡的 table 在用户切换到该选项卡之前不会加载。我怎样才能做到这一点？

每个选项卡的链接如下：

<ul class="nav nav-pills">
    <li class="active"><a href="#active_projects"
                data-toggle="tab">Active Projects</a></li>

    <li><a href="#archived_projects" data-toggle="tab">Archived
                    Projects</a></li>

    <li><a href="#active_families" data-toggle="tab">Active Families</a> </li>

    <li><a href="#archived_families" data-toggle="tab">Archived Families</a> </li>
</ul>

接下来，我有四个 divs 正在加载内容：

    <div class="tab-content">
        <div id="active_projects" class="tab-pane active"
            style="margin-bottom: 80px;">
            <div class="row-fluid">
                <table class="table table-hover">
                    <?php echo $headers; ?>
                    <?php if (isset($this->active)) : ?>
                    <?php echo $this->partialLoop('project/project/projectSummary.phtml',  $this->active) ?>
                    <?php endif; ?>
                </table>
            </div>
        </div>
        <div id="archived_projects" class="tab-pane"
            style="margin-bottom: 80px;">
            <div class="row-fluid">
                <table class="table table-hover">
                    <?php echo $headers; ?>
                    <?php if (isset($this->archived)) : ?>
                    <?php echo $this->partialLoop('project/project/projectSummary.phtml', $this->archived) ?>
                    <?php endif; ?>
                </table>
            </div>
        </div>
        <div id="active_families" class="tab-pane"
            style="margin-bottom: 80px;">
            <div class="row-fluid">
                <table class="table table-hover">
                    <?php echo $family_headers; ?>
                    <?php if (isset($this->active_families)) : ?>
                    <?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->active_families) ?>
                    <?php endif; ?>
                </table>
            </div>
        </div>
        <div id="archived_families" class="tab-pane"
            style="margin-bottom: 80px;">
            <div class="row-fluid">
                <table class="table table-hover">
                    <?php echo $family_headers; ?>
                    <?php if (isset($this->archived_families)) : ?>
                    <?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->archived_families) ?>
                    <?php endif; ?>
                </table>
            </div>
        </div>

    </div>

Zend Framework 用于创建 tables。选项卡内容更改为 JavaScript

<script type="text/javascript">
    // If a tab is specified by an anchor tag, activate it
    // See: https://github.com/twbs/bootstrap/issues/2415#issuecomment-4589184
    $(function () {
        var activeTab = $('[href=' + location.hash + ']');
        activeTab && activeTab.tab('show');
    });
</script>

我正在尝试什么

我想我可以使用 JQuery load()。我可以根据 document.getElementById("active_projects").innerHTML = "" 的内容得到基本的想法，但这需要一个字符串，使代码不是特别好。有什么想法吗？

Answer 1

如果选择了选项卡，您需要使用 AJAX 加载数据。例如：

HTML部分

<ul class="nav nav-pills">
    <li class="active">
        <a href="#" class="active_projects" data-toggle="tab">Active Projects</a>
    </li>
    ...
</ul>

另一部分HTML

<div id="active_projects" class="tab-pane active" style="margin-bottom: 80px;">
    <div class="row-fluid">
        <!-- Data from AJAX query will insert here -->
    </div>
</div>

JQuery 部分 (http://api.jquery.com/jQuery.ajax/)

$(".active_projects").click(function() {
    $.ajax({
        method: "GET",
        url: "/controller/action/active_projects"
    })
    .done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
});

在 PHP 中需要创建具有 JSON 响应的操作

public function loadAction()
{
    $view = JsonModel();
    $view->addValues(["table" => "this will table data"]);
    return $view;
}

单击时正在加载 Bootstrap 药丸内容

Loading Bootstrap pill content on click

html

javascript

jquery

zend-framework

twitter-bootstrap

我正在尝试什么