У меня есть список элементов, для которых я хочу показать пару элементов, а затем кнопку «еще». Я хотел бы, чтобы кнопка «more» отображала новые элементы во всплывающем окне. Есть много способов сделать эту работу, но я пытаюсь выяснить, что является лучшей практикой.
Вот мой подход. Мы используем MooTools и Clientcide на нашем сайте:
Непосредственно после кнопки «еще» я включаю div, содержащий содержимое, которое я хочу поместить во всплывающее окно (полный список, включая дублирование тех элементов, которые отображаются по умолчанию), с классом, включающим стиль "дисплей: нет".
Я прикрепляю событие к кнопке more, которая запускает скрипт под названием «popupNext». popupNext берет следующий элемент после кнопки (используя getNext из mootools) и создает новый StickyWin (через Clientcide и stickywin.ui) с этим элементом в качестве своего содержимого. Затем (и эта часть кажется особенно хакерской) он удаляет класс, включающий стиль «display: none», из элемента содержимого.
Наконец, я использую element.store () (из mooTools) для хранения StickyWin (с ключом "win") в элементе события. Я не упомянул выше: когда запускается popupNext, он сначала проверяет с помощью element.retrieve (), существует ли существующий StickyWin, и показывает его, если он есть.
Кажется, все в порядке - самый большой недостаток - это раздувание страниц - хотя я показываю только первые пару элементов каждого списка, может быть больше, которые загружаются с каждой страницей, но никогда не видны. Но мне любопытно, есть ли лучший, стандартный способ сделать это. Например, я мог бы уменьшить раздувание, извлекая элементы через ajax, за счет более медленного ответа, когда пользователь хочет видеть полный список.