» » » Хак AJAX загрузка новостей и комментариев для DLE

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

0
Хак AJAX загрузка новостей и комментариев для DLE

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

Установка
1. Скачиваем архив и распаковываем в папку с своим шаблоном.
2. В main.tpl своего шаблона, перед
</body>
, добавляем:
[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)
Внимание!
Для просмотра скрытого текста, Вам необходимо Войти или Зарегистрироваться.
  • DLE хаки
  • 23-07-2013, 12:37
  • 1173
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.