Сегодня 25 июня, среда ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7281
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Хаки и Скрипты Next Generation CMS
Хаки и Скрипты Next Generation CMS
Голосов: 1
Адрес блога: http://ngcmshak.ru
Добавлен: 2013-12-31 14:21:51 блограйдером 88888888
 

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

2013-09-29 02:56:23 (читать в оригинале)

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

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

Установка
1. Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам ajks.zip (8.44 Kb)[/is-logged] и распаковываем в папку с своим шаблоном.
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 загрузку страниц своей мечты.
Вот так ...

Тэги: js,, интерфейс

 


Самый-самый блог
Блогер Рыбалка
Рыбалка
по среднему баллу (5.00) в категории «Спорт»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.