Техническая поддержка сервиса Quadro.Boards

Объявление

Идет поиск Хранителя форума

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Пагинатор (навигация по страницам темы)


Пагинатор (навигация по страницам темы)

Сообщений 1 страница 5 из 5

1

Или удобный постраничный навигатор в темах. Для  вверха и низа страницы Топика:

http://uploads.ru/i/l/F/7/lF74o.png

1 вариант:

ставим в HTML-вверх

<style type="text/css">
#paginator {
  opacity: 0.9;
  position: absolute
  left: 55px;
  z-index: 1000;
  filter: alpha(opacity=90);
  text-shadow: 0 1px 0 #000;
  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;
}
</style>

И в HTML-низ

<script type="text/javascript">
$('.linkst .pagelink a:not(.next):last').map(function () {
text = $(this).html();
text2 = $(this).attr('href');
ssylk = /(.*?)\/viewtopic\.php\?id=(\d+)\&p=(\d+)/g;
pId=(text2.replace(ssylk, '$2'));
Max=text;
var paginator='<div id="pagenav" style="display:none"><table id="paginator"><tr>';
for (p=1; p<=Max; p++) {
paginator += '<td><a id="pnav" style="text-decoration:none;" href="/viewtopic.php?id='+pId+'&p='+p+'">&nbsp;'+p+'&nbsp;</a></td>';
if (p%10 == 0) paginator += '</tr><tr>';
}
paginator += '</tr></table></div>';
$('#pun-viewtopic .pagelink').append(paginator);
});
$('div.pagelink').hover(function(){
$(this).find('#pagenav').toggle();
});
</script>


2ой вариант:

Не cтал разделять коды скрипта и  сss, -раз контент ставиться из HTML низ (да и убирать удобней)

Cтавим в HTML низ

<style>
#paginator {
  opacity: 0.9;
  position: absolute;
  left: 55px;
  z-index: 1000;
  filter: alpha(opacity=90);
  text-shadow: 0 1px 0 #000;
  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;
}
</style>
<script type="text/javascript">
$('.linkst .pagelink a:not(.next):last').map(function () {
text = $(this).html();
text2 = $(this).attr('href');
ssylk = /(.*?)\/viewtopic\.php\?id=(\d+)\&p=(\d+)/g;
pId=(text2.replace(ssylk, '$2'));
Max=text;
var paginator='<div id="pagenav" style="display:none"><table id="paginator"><tr>';
for (p=1; p<=Max; p++) {
paginator += '<td><a id="pnav" style="text-decoration:none;" href="/viewtopic.php?id='+pId+'&p='+p+'">&nbsp;'+p+'&nbsp;</a></td>';
if (p%10 == 0) paginator += '</tr><tr>';
}
paginator += '</tr></table></div>';
$('#pun-viewtopic .pagelink').append(paginator);
});
$('div.pagelink').hover(function(){
$(this).find('#pagenav').toggle();
});
</script>

спасибо Паше (rps) за корректировку стиля!

автор: Romych
ссылка на оригинал; оригинал2
демо: testing.1bb.ru

Теги: Скрипты и дополнения, Темы и опросы

0

2

Очень клёвая штука, спасибо!

0

3

А возможно такое, что эта вещь работает только у админов?

0

4

Спасибо! :cool:

0

5

Надоело перемещаться вперед/назад по три странички, поставила второй вариант пагинатора, всё работает) Спасибо!!

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Пагинатор (навигация по страницам темы)


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC