mishiko
Постоялец
- Регистрация
- 5 Сен 2011
- Сообщения
- 320
- Реакции
- 135
- Автор темы
- #1
Сейчас технология AJAX(загрузка контента без обновления страницы), стала уже не простой игрушкой, а атрибутом любого современного сайта. Поэтому мы сегодня, буквально за минуту, прикрутим на свой сайт AJAX загрузку новостей и AJAX загрузку комментариев для DLE.
Почему так быстро? Потому что умные люди, уже сделали прекрасный Jquery плагин, который нам осталось только правильно подключить. Называется он Infinite Ajax Scroll. Последнюю версию, вы можете скачать с официального Для просмотра ссылки Войди
Установка
1. Скачиваем архив dle_ajax.zip и распаковываем в папку с своим шаблоном.
2. В main.tpl своего шаблона, перед </body>, добавляем:
Код:
[aviable=main]
<script type="text/javascript" src="{THEME}/js/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}/js/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>
Пояснение
Теперь немного подробнее что мы сделали.
В первом шаге, мы загрузили сам скрипт и картинку в шаблон
Во втором, мы подключили этот скрипт на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав Для просмотра ссылки Войди
В третьем шаге, мы немного преукрасили внешний вид. ajaxProgress - это стили для загрузчика, который появляется при загрузке страниц. А ias_trigger, это кнопка с предложением загрузить ещё страницу.
В 4, 5 и 6 пунктах мы дали классы контейнерам, чтоб скрипт понимал что нужно подгружать и что прятать. Вы можете изменить названия и классы, если понимаете что делаете
Итог
За считанные минуты, мы сделали современный сайт, без каких либо вмешательств в движок.
Работа скрипта, сделана очень продумано: сохраняется навигация по страницам и есть поддержка "умеренной" загрузки (после нескольких страниц, просто появляется кнопка для загрузки).
Имея желание, при помощи плагина можно сделать AJAX загрузку страниц своей мечты.
