Пагинатор, или удобная постраничная навигация

[Romych]

в общем пошёл немного другим путём
устанавливаем скрипт пагинатора в
Альтернативный вариант установки пагинатора

Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> HTML -> Глобальные шаблоны (Global HTML elements) -> make_page_jump (Редактировать)
в
самый низ:

Код

<!-- Paginator 2012-->
<script type="text/javascript">
var paginator='<div id="pagenav" style="display:none;position:absolute;"><table id="paginator"><tr>';
for (var p=0; p<=$tp; p+=$pp) {
var m = p/$pp+1;
paginator += '<td><a id="pnav" style="text-decoration:none;padding:5px;" href="/index.php?showtopic=$ub&st='+p+'">&nbsp;'+m+'&nbsp;</a></td>';
if (m%5 == 0) paginator += '</tr><tr>';
}
paginator += '</tr></table></div>';
$('div#ipbwrapper1 table tbody tr td:first').hover(
function(){
$(this).append(paginator);
$(this).find('#pagenav').toggle();
},
function(){
$(this).find('div:last').remove();
} );
</script>

стиль оформления остаётся прежним, но на всякий случай продублирую
в Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> CSS
самый низ

Код

#paginator {
opacity: 0.9;
position: absolute;
left: 95px;
z-index: 1000;
filter: alpha(opacity=90);
background-color: #61bde7; /* фон блока пагинатора */
border: 2px solid #59add4; /* цвет границы блока */
table-layout: auto !important;
width: auto !important;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
khtml-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

#paginator td {
padding: 0.1em;
border-style: none;
}

#pnav:hover {
background: black; /* фон цифры при наведении курсора */
color: lime; /* цвет цифры при наведении курсора */
-moz-border-radius: 9000em;
border-radius: 9000em;
khtml-border-radius:9000em;
-webkit-border-radius:9000em;
font-weight: bold;
}

ПРИМЕР тот же,
тестируем

[asm-a]

Все равно не работает
http://exf.ipb.su/index.php?showtopic=24

[Romych]

заходя на ваш форум я вижу вот такой шаблон


при просмотре исходного кода которого, я не вижу ни стиля пагинатора, ни самого скрипта в положенном месте, так что не знаю какой именно вы шаблон редактируете, но в том, что видят гости, пагинатором и не пахнет

[WARLORD]

Romych, а какой у Вас стиль? Может это из-за него не работает?

[asm-a]

Romych, изменил

[Romych]

Цитата (WARLORD @ Фев 13 2012, 17:05)

Romych, а какой у Вас стиль? Может это из-за него не работает?

у меня стиль называется - examp

блин, действительно вся загвоздка в стилях, а точнее в разнице селекторов с которыми работает скрипт, у меня это:

Цитата

div#ipbwrapper1 table tbody tr td

а у вас:

Цитата

div#ipbwrapper table tbody tr td

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

Цитата

$('div#ipbwrapper1 table tbody tr td:first').hover(

надо заменить на эту:

Цитата

$('div#ipbwrapper table tbody tr td:first').hover(

или просто удалить единицу
должно всё заработать,
хм, интересно почему в стилях не совпадают селекторы?

[asm-a]

Цитата

у меня стиль называется - examp

Поправлю. Ваш стиль называется IP.Board. CSS у IPB, а картинки у examp.



Это сообщение отредактировал аsm-а - Фев 13 2012, 19:13

[Romych]

Цитата (аsm-а @ Фев 13 2012, 20:07)

Поправлю. Ваш стиль называется IP.Board. CSS у IPB, а картинки у examp.

ну, я называю то название стиля, которое фигурировало в каталоге при создании нового форума,
что-то судя по скрину пагинатор у вас смещается к шапке форума? какой браузер? (у меня во всех корректно отображается)

[WARLORD]

У меня этот код работает только при наведении на графу портал.

В итоге я удалил код, а когда автор его усовершенствует я поставлю.

[asm-a]

Цитата

какой браузер?

FireFox 11

[Romych]

Цитата (WARLORD @ Фев 13 2012, 21:22)

У меня этот код работает только при наведении на графу портал.

В итоге я удалил код, а когда автор его усовершенствует я поставлю.

угу, вижу, блин какая же однако разница в селекторах разных стилей, ок, будем работать

[Romych]

раз такая пляска с селекторами в разных стилях, мы не будем идти у них на поводу и создадим свой, а для этого мы присвоим нужной нам ячейке определённый класс,
с этого и начнём
1
в
Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> HTML -> Просмотр темы (Topic View Section) -> Header (Редактировать)
ищем вот такую строку

Цитата

<td align='left' width="20%" nowrap="nowrap">{$data['TOPIC']['SHOW_PAGES']}&nbsp;{$data['TOPIC']['go_new']}</td>

и добавляем к ней класс class="paginat"

Цитата

<td align='left' width="20%" nowrap="nowrap" class="paginat">{$data['TOPIC']['SHOW_PAGES']}&nbsp;{$data['TOPIC']['go_new']}</td>

сохраняем,
а дальше уже дело техники
2
Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> HTML -> Глобальные шаблоны (Global HTML elements) -> make_page_jump (Редактировать)
в
самый низ добавляем скрипт:

Код

<!-- Paginator 2012-->
<script type="text/javascript">
var paginator='<div id="pagenav" style="display:none;position:absolute;"><table id="paginator"><tr>';
if ( $tp > 0 && $pp > 0 )
for (var p=0; p<=$tp; p+=$pp) {
var m = p/$pp+1;
paginator += '<td><a id="pnav" style="text-decoration:none;padding:5px;" href="/index.php?showtopic=$ub&st='+p+'">&nbsp;'+m+'&nbsp;</a></td>';
if (m%5 == 0) paginator += '</tr><tr>';
}
paginator += '</tr></table></div>';
$('td.paginat').hover(
function(){
$(this).append(paginator);
$(this).find('#pagenav').toggle();
},
function(){
$(this).find('div:last').remove();
});
</script>

стиль оформления у нас не меняется, но опять дублирую
3

в Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> CSS
самый низ

Код

#paginator {
opacity: 0.9;
position: absolute;
left: 95px;
z-index: 1000;
filter: alpha(opacity=90);
background-color: #61bde7; /* фон блока пагинатора */
border: 2px solid #59add4; /* цвет границы блока */
table-layout: auto !important;
width: auto !important;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
khtml-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

#paginator td {
padding: 0.1em;
border-style: none;
}

#pnav:hover {
background: black; /* фон цифры при наведении курсора */
color: lime; /* цвет цифры при наведении курсора */
-moz-border-radius: 9000em;
border-radius: 9000em;
khtml-border-radius:9000em;
-webkit-border-radius:9000em;
font-weight: bold;
}

_______________________________________
должно работать независимо теперь от стиля

[WARLORD]

Теперь да, все работает! Спасибо!!!

PS только как добавить на нижнее веню выбора страницы? Которое в самом низу темы.

Это сообщение отредактировал WARLORD - Фев 14 2012, 10:44

[asm-a]

WARLORD, вместо Header открывайте Footer

[Romych]

да, вам правильно подсказывают,
для срабатывания пагинатора и внизу, нужно ячейке добавить класс, с коротым работает скрипт

Главная страница AЦ -> Скины и Шаблоны -> Настройка скинов -> HTML -> Просмотр темы (Topic View Section) -> Footer (Редактировать)

ищем строку

Цитата

<td align='left' width="20%" nowrap="nowrap">

добавляем

Цитата

<td align='left' width="20%" nowrap="nowrap" class="paginat">

и всё