Гладкая div-галерея с вкладками jQuery - PullRequest
Новая
       16

Гладкая div-галерея с вкладками jQuery

1 голос
/ 16 июня 2011

Я ищу элегантное и эффективное решение для чего-то, что можно назвать div «галереей».

В настоящее время мы используем вкладки пользовательского интерфейса jQuery и предварительно заполняем div s на сервере. Пользователь видит только активные div и может перейти к следующей или предыдущей вкладке. Однако, поскольку список теперь содержит более 100 элементов, мы хотели бы перейти к подходу с динамической загрузкой.

Сначала я попытался отделить генерацию div для элемента от вызова AJAX и использовать встроенную функциональность AJAX вкладок. Однако сбой при перемещении назад или вперед с помощью вкладок JQuery UI AJAX очень заметен . Когда вкладка загружена, она кэшируется и снова работает нормально.

У меня сейчас есть следующие идеи:

  1. Каким-то образом выбирайте следующие 5 вкладок каждый раз, когда пользователь нажимает «Далее».

    Скорее всего, пользователь не сможет прокрутить слишком быстро, и в случае быстрой прокрутки у нас все нормально. Все, что я хочу сделать, это убедиться, что обычно несколько следующих вкладок загружаются до того, как отобразятся. Возможно ли это с помощью вкладок jQuery?

  2. Заполните массив JavaScript на сервере и создайте div s на лету.

    Это еще одно возможное решение, которое я рассматриваю. Я мог бы написать функцию для генерации div по объектным данным, сохраненным в JavaScript. JavaScript может быть сгенерирован сервером.

Что больше подходит? Я что-то упустил?

1 Ответ

1 голос
/ 17 июня 2011

Хорошо, так как я не получил ответов, я пошел по второму маршруту, и это кажется хорошим решением.

Сценарий в разделе head заполняет глобально видимый список данных items с JSON, сгенерированным на месте сервером.
Затем, где вкладки 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;
}

Поскольку все это происходит до загрузки страницы, мне не пришлось менять код, управляющий навигацией по вкладкам.

Конечно, это еще не включает предварительную выборку изображений, но делает это намного проще, поскольку создание вкладок происходит в одном месте, и им становится легче управлять.

...