- Адаптировал: 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>
Плюс тут же меняем:
[next-link]Вперед[/next-link]
<span class="next-posts">[next-link]Вперед[/next-link]</span>
Всё готово. Уверен это заняло у вас не многим больше минуты ;)
Пояснение
Теперь немного подробнее что мы сделали.
В первом шаге, мы загрузили сам скрипт,стили и картинку в шаблон .
Во втором, мы подключили этот скрипт и стили на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав документацию. Например подключить ещё на странице "последние комментарии", при просмотре категори и т.д.
Итог
За считанные минуты, мы сделали современный сайт, без каких либо вмешательств в движок.
Работа скрипта, сделана очень продумано: сохраняется навигация по страницам и есть поддержка "умеренной" загрузки (после нескольких страниц, просто появляется кнопка для загрузки).
Имея желание, при помощи плагина можно сделать AJAX загрузку страниц своей мечты.
Вот так ...
Можешь почитать и вот эту статейку " Веб-сервисы позволяющих создать кнопку online"
Это тоже интересно
05.12.13Подгрузка новостей как ВКонтакте
05.10.14Калькулятор калорий
05.12.15Падающие снежинки на сайт
25.09.17Асинхронная загрузка JS
25.09.17Асинхронная загрузка CSS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить