Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Навигация по страницам с помощью jQuery (https://javascript.ru/forum/jquery/40945-navigaciya-po-stranicam-s-pomoshhyu-jquery.html)

DeD_Mazai 25.08.2013 21:11

Опечатка, ну это я так, для примера написал...

Designer 25.08.2013 21:21

Цитата:

Сообщение от DeD_Mazai (Сообщение 269280)
Опечатка, ну это я так, для примера написал...

Да я тоже, себя проверить что не совсем дурак :) увидел, спросил, мало ли что, говорю же не ас в jQuery а HTML и CSS хорошо знаю...
Сейчас проверил, вроде работает, но скрипт ко всем ссылкам с адресом
a href="#"
понимает их тоже к навигацию, щя гляну, может у меня какой косяк...
Ещё раз спасибо!

Designer 25.08.2013 23:30

Цитата:

Сообщение от DeD_Mazai
А можно увидеть код того, что получилось на скрине?

Да, кстати, просили код, вот демо , а вот код ;)

Designer 26.08.2013 01:45

Готовый вариант для CMS DataLife Engine
 
Всем привет ещё раз!
В общем, ковырял-ковырял и наковырял... :)
Думал велосипед изобрести, а пришлось сделать проще. Кому надо, вот готовый вариант для DataLife Engine.
CSS код добавить к Вашим стилям, или создать новый и подключить его:
Также нужны будут и шрифты с иконками, скачать можно тут свежую версию.
* {
	margin: 0;
	padding: 0;
}
/* 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: 2px 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 */

jQuery скрипт для пагинации:
/* Начало скрипта пагинации */
$('.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');
});
/* Конец скрипта пагинации */

HTML код для файла navigation.tpl шаблона в DataLife Engine:
<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>

У себя проверил, всё работает! Кому надо - меняйте как хотите. Вот пример того что у Вас должно получится.
Всем удачи!


Часовой пояс GMT +3, время: 22:55.