• 2259
  • 2
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Сейчас технология AJAX(загрузка контента без обновления страницы), стала атрибутом любого современного сайта. Поэтому сегодня, буквально за минуту, прикрутим на свой сайт AJAX загрузку новостей .

Почему так быстро? Потому что умные люди, уже сделали прекрасный Jquery плагин, который нам осталось только правильно подключить. Называется он Infinite Ajax Scroll. Последнюю версию, вы можете скачать с официального GitHab'a плагина. А я cразу перейду к установке...

Установка
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. и распаковываем в папку с своим шаблоном.
2. В main.tpl своего шаблона, перед /body, добавляем:

Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/jquery.ias.css" />
<script type="text/javascript" src="{{ tpl_url }}/js/jquery-ias.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.ias({
container : '#content-main',// Название контейнера в котором находятся новости
item: '.article',// Название контейнера самой новости
pagination: '.pagination',// Ссылка на следующюю новость
next: '.next-posts a',// Ссылка на следующюю новость
loader: '<img src="{tpl_url}/images/loader.gif"/>',//Загрузчик, который появляется при подгрузке страниц
triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
trigger: 'Ещё' // Текст кнопки
});
});
</script>
6. Открываем pages.tpl :
Плюс тут же меняем:
Код:
[next-link]Вперед[/next-link]
на
Код:
<span class="next-posts">[next-link]Вперед[/next-link]</span>
здесь главное правильно присвоить класс next-posts,если в pages.tpl не получается то можно прописать класс в файле variables.ini.
Всё готово. Уверен это заняло у вас не многим больше минуты ;)

Пояснение
Теперь немного подробнее что мы сделали.
В первом шаге, мы загрузили сам скрипт,стили и картинку в шаблон .
Во втором, мы подключили этот скрипт и стили на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав документацию. Например подключить ещё на странице "последние комментарии", при просмотре категори и т.д.
Итог
За считанные минуты, мы сделали современный сайт, без каких либо вмешательств в движок.
Работа скрипта, сделана очень продумано: сохраняется навигация по страницам и есть поддержка "умеренной" загрузки (после нескольких страниц, просто появляется кнопка для загрузки).
Имея желание, при помощи плагина можно сделать AJAX загрузку страниц своей мечты.
Вот так ...

Можешь почитать и вот эту статейку "Эффекты для диалоговых модальных окон вашего сайта"

mistakes

Это тоже интересно

    irbees2008

    irbees2008 | 19.07.2015 - 03:59

    Если все правильно сделал как написано выше то все будет работать ,а так хотя бы адрес сайта что бы глянуть ,что там не так

    ответить

    cr1t

    cr1t | 18.07.2015 - 06:16

    Почему то выводит три одинаковых новости. В чем причина?)

    ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

какой форум лучше для вас
Результаты

----