Хаки и Скрипты Next Generation CMS

Загрузка новостей на AJAX

irbees2008 irbees2008 Опубликовано - 29 - сентября JS
4570 - 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 загрузку страниц своей мечты.
Вот так ...

Можешь почитать и вот эту статейку "Оформляем поле поиска"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.288сек
  • Потребление памяти: 5.284 Mb 
  •   Яндекс.Метрика