平滑div“画廊”带有 jQ​​uery 选项卡

Question

我正在寻找一种优雅且高效的解决方案，可以将其描述为 div “画廊”。

目前我们正在使用 jQuery UI 选项卡并在服务器上预填充 div。 用户只能看到活动的 div，并且可以移至下一个或上一个选项卡。但是，由于列表现在包含 100 多个项目，我们希望切换到动态加载方法。

首先，我尝试将项目的 div 生成分离到 AJAX 调用，并使用内置的 Tabs AJAX 功能。然而，使用 jQuery UI Tabs AJAX 来回移动时的故障非常明显。加载选项卡后，它会被缓存，因此它会再次正常工作。

我现在有以下想法：

1. 每次用户单击“下一步”时，以某种方式预取接下来的 5 个选项卡。

   用户不太可能滚动得很快，而且我们可以接受快速滚动时出现的故障。我想要做的就是确保正常情况下，几个下一个选项卡在显示之前会被加载。这可以通过 jQuery Tab 实现吗？

2. 在服务器上填充 JavaScript 数组并动态创建 div。

   这是我正在研究的另一个可能的解决方案。我可以编写一个函数来通过 JavaScript 中保存的对象数据生成 div 。 JavaScript 可以由服务器生成。

哪个更合适？我错过了什么吗？

Answer 1

好吧，由于我没有得到回复，所以我选择了第二条路线，这似乎是一个很好的解决方案。

head 部分中的脚本使用服务器就地生成的 JSON 填充全局可见的 items 数据列表。
然后，在之前定义选项卡 div 的位置，我放置了一个脚本来动态生成它们：

<div id="tabs" class="ui-tabs"> 
        <ul class="ui-tabs-nav"></ul>

        <script type="text/javascript"> 
            for (var i = 0; i < items.length; i++)
                createTab(items[i], i);                     
        </script> 
</div>

createTab 函数在单独的 JS 文件中定义，并管理创建 < code>div 和 ul 的列表项：

function createTab(item, index) {
    createPanel(item, index).appendTo($('#tabs'));
    createTabItem(index).appendTo($('.ui-tabs-nav'));
}

// creates list item with a href="#tabs-1..n"
function createTabItem(index) {
    return $('<li></li>').append(
        $('<a></a>').attr('href', '#tabs-' + (index+1))
    );
}

// creates a div for tab
function createPanel(item, index) {
    var panel = $('<div class="ui-tabs-panel"></div>')
        .attr('id', 'tabs-'+ (index+1)); // id = "tabs-1..n"

    if (index > 0) panel.addClass('ui-tabs-hide'); // hide all tabs but the first

    // whatever you need to fill the tab with
    createPicture(item).appendTo(panel);
    createDescription(item).appendTo(panel);

    return panel;
}

由于所有这些都发生在页面加载之前，因此我不必更改管理选项卡导航的代码。

当然，这还不能实现预取图像，但使其变得更容易，因为选项卡创建发生在一个地方并且变得更容易控制。