堆栈内存溢出
  繁体   English   中英

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

[英]JQuery UI tabs using ajax to load document fragment

 原文  2011-09-16 12:41:57  1   2    jquery/ ajax/ jquery-ui/ tabs/ jquery-ui-tabs

问题描述

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

2 个解决方案

解决方案1
 1 已采纳  2011-09-18 01:11:46

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

解决方案2
 0  2011-09-16 13:38:11

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用AJAX在同一页面中加载jQuery UI选项卡 通过AJAX正确加载jQuery UI选项卡 jQuery UI 选项卡：在不使用 Ajax 或 iframe 的情况下从单个文件/页面加载选项卡 JQuery 选项卡使用 ajax 加载 div 需要通过Ajax加载jQuery UI Tabs动态内容链接 如何使用jQuery UI选项卡通过Ajax加载外部div jQuery UI嵌套选项卡-将AJAX内容加载到单个DIV中 jQuery UI AJAX选项卡-第一个选项卡不加载 jquery-ui .tabs ajax加载页面的特定内容？ 自动加载ajax加载的内容（jquery ui tabs）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM