• Автор:

    Flesha
  • Добавлено:

    июл 02, 2013
  • Комментариев:

    0
  • Просмотров:

    1407

Хак AJAX загрузка новостей и комментариев

Хак AJAX загрузка новостей и комментариев

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

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

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

[aviable=main]
<script type="text/javascript" src="{THEME}/css/jquery-ias.min.js"></script>
<script type="text/javascript">
$(function() {
jQuery.ias({
container : '#dle-content', // Название контейнера в котором находятся новости (менять не нужно)
item: '.news', // Название контейнера самой новости
pagination: '.navigation', // Название контейнера навигации по страницам
next: '#page_next a', // Ссылка на следующюю новость
loader: '<span class="ajaxProgress"></span>', // Загрузчик, который появляется при подгрузке страниц
triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
trigger: 'Ещё' // Текст кнопки
});
});
</script>
[/aviable]
[aviable=showfull]
<script type="text/javascript" src="{THEME}/css/jquery-ias.min.js"></script>
<script type="text/javascript">
$(function() {
jQuery.ias({
container : '#dle-comments-list', // Название контейнера в котором находятся комменты (менять не нужно)
item: '.comment', // Название контейнера самого коммента
pagination: '.navigation', // Название контейнера навигации по страницам
next: '#page_next a', // Ссылка на следующюю новость
loader: '<span class="ajaxProgress"></span>', // Загрузчик, который появляется при подгрузке страниц
triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
trigger: 'Ещё' // Текст кнопки
});
});
</script>
[/aviable]


3. В CSS стили, в любое место, добавляем:
.ajaxProgress {background:#eee url(../images/loader.gif) no-repeat center center;display:block;width:40px;height:40px;margin:10px auto;border-radius:10px;border:1px solid #ddd;}
.ias_trigger a {box-shadow:inset 0px 1px 0px 0px #fff;border-radius:6px;border:1px solid #dcdcdc;display:block;color:#777;font-weight:bold;padding:10px 0;text-decoration:none;margin-bottom:20px;text-shadow:1px 1px 0px #fff;text-align:center;font-size:14px;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#eaeaea 100%);
background: linear-gradient(to bottom, #f4f4f4 0%,#eaeaea 100%);
}
.ias_trigger a:hover {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#e0e0e0));
background: -webkit-linear-gradient(top, #efefef 0%,#e0e0e0 100%);
background: -o-linear-gradient(top, #efefef 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%);
background: linear-gradient(to bottom, #efefef 0%,#e0e0e0 100%);
}
.ias_trigger a:active {
box-shadow:inset 0 0 5px rgba(0,0,0,.1);
}


4. Открываем shortstory.tpl и оборачиваем всё его содержимое в такой DIV:
<div class="news"> ...тут содержимое...</div>


5. Открываем comments.tpl и опять оборачиваем его содержимое в DIV:
<div class="comment"> ...тут содержимое...</div>


6. Открываем navigation.tpl и оборачиваем его содержимое в DIV:
<div class="navigation"> ...тут содержимое...</div>


Плюс тут же меняем:
[next-link]Вперед[/next-link]

на
<span id="page_next">[next-link]Вперед[/next-link]</span>


Всё готово. Уверен это заняло у вас не многим больше минуты :)
Автор: SaD (sadisme.ru)

Внимание! У Вас нет прав для просмотра скрытого текста.
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.