使用 ajax 加载文档片段的 JQuery UI 选项卡答案

【问题标题】：JQuery UI tabs using ajax to load document fragment使用 ajax 加载文档片段的 JQuery UI 选项卡
【发布时间】：2011-11-18 16:16:35
【问题描述】：

我正在使用 JQuery UI 选项卡并希望从生成的页面加载片段。但是，整个页面已加载。代码如下：

<head>
<script src="/js/jquery-ui-1.8.15.custom.min.js"></script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>
</head>


<div id="tabs">
<ul > 
    <li><a href="/page #content">Tab Head</a></li>
</ul>
</div>

有没有简单的方法来做到这一点？另外，Tabs 插件是否使用 .load() 或 .get() ajax 调用？

【问题讨论】：

一个好问题。如果删除 HREF 中的空格会怎样？

标签： jquery ajax jquery-ui tabs jquery-ui-tabs

【解决方案1】：

您可能需要通过拦截所需的选项卡并加载内容来自己完成。例如，您可以将用于加载片段的实际 URL 包含到数据属性中，例如 data-content-url="/page #content"，然后将其加载到select 事件。所以，它看起来像：

$('#tabs').tabs({
    select: function(event, ui) {
        var $tabAnchor = $(ui.tab);
        if (ui.index == 0 && !$tabAnchor.data('completed')) {
            $($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() {
                // indicate the content has been loaded
                $tabAnchor.data('completed', true);
            });
        }
    }
});

HTML 看起来像：

<div id="tabs">
    <ul>
        <li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li>
        <li><a href="#tabs2">Tab 2</a></li>
    </ul>

    <div id="tabs1"></div>
    <div id="tabs2">...</div>
</div>

【讨论】：

谢谢！仍然认为应该有一个更通用的方法来做到这一点。查看 JQuery .load 规范，它应该很容易实现......

【解决方案2】：

您可以使用选项卡的加载事件（“加载远程选项卡的内容后触发此事件。”）来解析/准备/编辑加载的内容并获取页面的片段。

【讨论】：