1

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

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

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

我现在有以下想法：

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

    用户不太可能快速滚动，我们可以在快速滚动的情况下处理故障。我要做的就是确保通常在显示几个下一个选项卡之前加载它们。jQuery选项卡可以做到这一点吗？

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

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

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

4

1 回答 1

1

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

该部分中的脚本使用服务器就地生成的 JSONhead填充全局可见的数据列表。 然后，在之前定义了 tabs 的地方，我放置了一个脚本来即时生成它们：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;
}

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

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

于 2011-06-17T11:21:59.143 回答