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

Установка

1. Скачиваем архив и распаковываем в папку с своим шаблоном.

2. В main.tpl своего шаблона, перед

</body>

, добавляем:

[aviable=main]
<script type="text/jаvascript" src="{THEME}/css/jquery-ias.min.js"></script>
<script type="text/jаvascript">
$(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/jаvascript" src="{THEME}/css/jquery-ias.min.js"></script>
<script type="text/jаvascript">
$(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)

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

dle_ajax.zip

MD5: 8c26bd090c7eacb724f0cea931813dd0

Скачано: 440, размер: [9,61 Kb], дата: 23 июль 2013

Если ссылка на скачивание файла не доступна - дайте нам знать об этом через форму обратной связи