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

发布于 2024-12-04 16:39:35 字数 470 浏览 0 评论 0原文

我正在使用 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>

有一个简单的方法可以做到这一点吗？另外，选项卡插件是否使用 .load() 或 .get() ajax 调用？

原文

I am using JQuery UI tabs and would like to load a fragment from a generated page. However, the whole page is loaded. Here is the code:

<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>

Is there an easy way of doing this? Also, is the Tabs plugin using .load() or .get() ajax calls?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世俗缘 2024-12-11 16:39:36

您可能需要自己通过拦截所需的选项卡并加载内容来完成此操作。例如，您可以包含用于将片段加载到数据属性的实际 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>

You may need to do it yourself by intercepting the desired tab and load the content in. For example, you could include the actual URL for loading the fragment to a data attribute, say, data-content-url="/page #content", and load it in the select event. So, it would look something like:

$('#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);
            });
        }
    }
});

The HTML would look something like:

<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>

回复收藏 0 原文