Question

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

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

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

我现在有以下想法：

每次用户点击“下一步”时，以某种方式预取下5个标签。

用户不太可能快速滚动，我们可以在快速滚动的情况下出现故障。我想要做的就是确保通常在之前加载几个下一个标签。这是否可以使用jQuery Tabs？
在服务器上填充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文件中定义，并管理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;
}

由于所有这些都是在加载页面之前发生的，所以我不必更改管理标签导航的代码。

当然，这还没有启用预取图像，但是更容易做到，因为标签创建发生在一个地方，并且变得更容易控制。

使用jQuery选项卡平滑div“gallery”

1 个答案: