Перейти к содержимому

Фотография

DLE 10.1* - оформление pagination

* * * * * 1 Голосов dle dle 10.1 pagination dle pagination

  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1
OFFLINE   InjutkinAG

InjutkinAG

    Администратор

  • Администраторы
  • PipPipPip
  • 171
  • 554 сообщений
  • 214 тем
  • Страна: Country Flag
  • ГородКраснодар
  • 1 Статьи
  • Время онлайн: 22d 37m 21s
Занимаюсь оформлением сайта http://****.ru при просмотре списка статей из определенной категории и слишком большого их количества, страница разбивается на несколько страниц, с возможностью перемещения по ним.
В DLE это все реализовано довольно коряво, потому начнем мудрить и приводить все к человеческому виду, без вмешательства в код движка.

Начнем с CSS (я сделал для себя просто, в виде основного css использую bootstrap, и что-бы не вносить в него изменения создал отдельный css со своими "записями")

@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
/* Start pagination */
.pagination {
display: inline-block;
overflow: hidden;
text-align: center;
font-family: 'RobotoMedium', Arial, sans-serif;
font-size: 17px;
margin: 25px 0 5px 0;

}
.pagination span, .pagination a {
background-color: #f9f9f9;
float: left;
border-radius: 2px;
text-decoration: none;
margin: 5px 5px 0 0;
padding: 9px 14px;
}
.pagination, .pagination span, .pagination a {
color: #757575;
}
.pagination span.next-button, .pagination a.next-button, .pagination span.prev-button, .pagination a.prev-button {
background-color: #474747;
font-size: 28px;
padding: 5px 14px 5px 14px;
}
.pagination a.next-button, .pagination a.prev-button, .pagination span.current {
color: #FFF;
}
.pagination a.next-button:hover, .pagination a.prev-button:hover, .pagination a:hover, .pagination span.current {
background-color: #e7402f;
color: #FFF;
}
/* End pagination */

Сам файл navigation.tpl (находится в папке с вашим шаблоном)

<script type="text/javascript">
/* Начало скрипта пагинации */
$('.pagination').each(function() {
$('.pagination').find('.icon-angle-left').parent().addClass('prev-button');
$('.pagination').find('.icon-angle-right').parent().addClass('next-button');
$('.pagination').find('span').addClass('current');
});
/* Конец скрипта пагинации */
</script>

<!-- Навигация DLE -->
<div class="pagination">
[prev-link]<i class="icon-angle-left"></i>[/prev-link]
{pages}
[next-link]<i class="icon-angle-right"></i>[/next-link]
</div>

В основном шаблоне должен быть подключен jquery, но в DLE он подключен по умолчанию, версия должна быть не ниже 1.4

Посмотреть пример http://svet-tvortsa.ru/psyche/ (перемещаемся в самый низ)

Прикрепленный файл  navigation.jpg   16,11К   10 Количество загрузок:



Кто читал эту тему?





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных