Как обрабатывать много элементов в jQuery? - PullRequest
Новая
       10

Как обрабатывать много элементов в jQuery?

5 голосов
/ 25 июля 2011

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

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

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

Это не такая уж большая проблема, и я знаю, что могу достичьчто с таким плагином, как ScrollTo .

Теперь представьте, что вместо 4 страниц у меня есть 16. Этот плагин можно легко масштабировать, но поскольку на странице существует так много элементов (каждая панель содержит изображения, текст, меню, заголовки и т. д.), сайт значительно замедляется.

Я могу решить эту проблему, когда уже нахожусь на заданной странице, скрыв все остальные страницы -- но как я могу обрабатывать все элементы при анимации с одной панели на другую?Есть идеи для реализации?

Спасибо!

Ответы [ 4 ]

8 голосов
/ 25 июля 2011

Не загружайте все в DOM, используйте ajax, извлекайте то, что вам нужно, и удаляйте то, что вы не делаете. Я работал над сайтом, очень похожим на то, что вы описали однажды, и я пошел по пути «спрятать все в дом», мне в конечном итоге пришлось переписать его части, чтобы использовать ajax, потому что страница просто загружалась слишком долго.

2 голосов
/ 01 августа 2011

2Cents:

  • по умолчанию все панели, кроме активной, скрыты и имеют дополнительный класс CSS (например, "panel-упрощенный")
  • С упрощенной панелью макет сводится к абсолютному минимуму: нет продвинутых методов css3, отображается только выбранный контент, возможно, даже фиктивный контент
  • при нажатии целевая панель приобретает полную красоту / теряет упрощенную панель
  • показаны только необходимые панели, которые «пропущены» (мин: 2 панели, макс .: ~ 10 панелей (0,0) -> (4/4))

например. Состояние до (0,0) -> (2,2). Скрытые панели без ярлыка. 

----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------
2 голосов
/ 29 июля 2011

не уверен, как твой HTML-код, но я согласен с предложением sjobe.

Полагаю, у вас есть такое меню: 

<ul id='menu'>
    <li><a href='#home'>home</a></li>
    <li><a href='#about'>about</a></li>
    <li><a href='#contact'>contact</a></li>
    <li><a href='#jobs'>jobs</a></li>
</ul>

и некоторые элементы типа вот так: 

<div id='container'>
    <div id='home'></div>
    <div id='about'></div>
    <div id='contact'></div>
    <div id='jobs'></div>
</div>

Теперь JavaScript: 

// when DOM's ready
$(document).ready(function() {
    // get the current hash or default to #home if none
    hash = window.location.hash ? window.location.hash : '#home';

    // construct the file name to load
    file = hash.replace('#', '/') + '.html';
    // load the file to the div
    $(hash).load(file);
    // and scroll to it
    $.scrollTo(hash, 800, {easing:'elasout'});

    // and create handler for menu click
    $('#menu a').click(function(event) {
        event.preventDefault();
        hash = this.hash;
        $.scrollTo(hash, 800, {easing:'elasout'});
        });
    });

// when page (incl scripts, styles, images, etc) ready
$(window).load(function() {
    // iterate through each menu
    $('#menu a').each(function() {
        // get its hash
        hash = this.hash;
        // construct the file name to load
        file = hash.replace('#', '/') + '.html';
        // preload the file to the div
        $(hash).load(file);
        });
    });
1 голос
/ 30 июля 2011

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

move from (2,4) to (4,2)
, вы рассчитываете, что будете двигаться вниз и влево.Что касается проблемы замедления, у вас должны быть только элементы html на этих панелях (и, по крайней мере, идентификатор фонового изображения), и вы можете загружать информацию с помощью вызовов ajax после выполнения анимации замены.
...