jPaginate: плагин нумерации страниц на jQuery

автор: 2Web18 февраля, 2011

Добавить в избранные

jPaginate — jQuery плагин нумерации страниц выделяется тем, что в функционал плагина входит анимация перелистывания нумерации. Пользователи могут прокручивать номера страниц, щелкая по кнопкам управления или наводя на них курсором мыши.

ПримерСкачать

Вы можете вызвать плагин следующим образом:
$(elementID).paginate()

Также есть ряд настроек:

count: Количество страниц
start: С какого номера страницы начинать
display: Как много номеров страниц отображать
border: Бордюр (true/false)
border_color: Цвет бордюра
text_color: Цвет текста/номеров
background_color: Цвет фона
border_hover_color: Цвет бордюра при наведении
text_hover_color: Цвет текста при наведении
background_hover_color: Цвет фона при наведении
images: Стрелки должны быть картинками или нет (true/false)
mouse: Со значением “press” пользователь может зажать кнопку мышки и прокрутка продолжится. Со значением “slide” прокрутка возможна только по щелчку.
onChange: Функция обратного вызова при нажатии на страницу.

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

Источник: tympanus.net

Тэги: плагин, скачать

« Reveal — модальные окна на jQuery

Геометрические фигуры на CSS »

15 комментариев на “jPaginate: плагин нумерации страниц на jQuery”

Алиса says:

24.01.2012 в 18:12

Все бы здорово, но к сожалению при применении стиля «display: block» к любому из демо-нумераций, предварительно естественно скрыв его «display: none», цифры потом выпадают в столбец, Вы не подскажите, как это можно исправить?
0 0

Ответить
- 2Web says:
  
  24.01.2012 в 18:30
  
  как у вас все сложно.
  Понимаете ли, при тех стилях, что идут с примерами по умолчанию, цифры никак не должны выпадать в столбец. Там достаточно много CSS свойств отвечает за это. Поэтому трудно дать какой-либо совет по правке.
  Но если вам не трудно, то скиньте ссылку или архив вашей страницы на е-mail admin гав 2web-master.ru. Мы обязательно поможем!
  0 0
  
  Ответить
Алиса says:

24.01.2012 в 21:00

Я думаю такой маленький кусочек кода, нет смысла отправлять по почте, да и мой сайт с интернета недоступен. :)
Вот если Вы замените на эти строчки, увидите результат, я если честно долго сегодня с бубном плясала, и так и сяк, пыталась этот косяк исправить, если Вы мне поможете, буду Вам премного благодарна.
```
<div onClick="$('#demo4').css('display','block');">
<h1>Demo 4</h1>
<div id="demo4" style="display:none;">
</div>
</div>
```
0 0

Ответить
- 2Web says:
  
  25.01.2012 в 05:52
  
  Здравствуйте, Алиса. Решение оказалось простым.
  Дело в том, что по коду вы сначала прячете div c id="demo4", а потом запускается скрипт паджинации, который собственно и создает функционал и отображение паджинации.
  Чтобы цифры не убегали по вертикали нужно или перенести запуск скрипта паждинации в header сайта или перенести свойство display:none после запуска скрипта. Т.е. сначала надо чтобы запустился скрипт, после этого прячем элемент управления.
  Например, вместо
```
<div id="demo4" style="display:none;">
```
  исправляем на
```
<div id="demo4">
```
  а после строк
```
$('#p'+page).addClass('_current').show();
										  }
			});
```
  добавляем
```
$('#demo4').css('display','none');
```
  0 0
  
  Ответить

Екатерина says:

16.05.2012 в 10:31

где этот плагин прописать и как? подскажите пожалуйста, пробую jquery

0 0

Ответить

2Web says:

16.05.2012 в 13:04

вот пример запуска. прописываете в html следующий код

		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script src="jquery.paginate.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
			$("#demo1").paginate({
				count 		: 100,
				start 		: 1,
				display     : 8,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press'
			});
		});
		</script>

0 0

Ответить

Екатерина says:

16.05.2012 в 15:39

2Web, спасибо. Я вставила этот код на главную страницу, где хотела увидеть нумерацию, прописала путь к скриптам. Но нумерация не появилась на странице((. Платфоррма — битрикс. Подскажите, что делаю не так?
0 0

Ответить
- 2Web says:
  
  16.05.2012 в 16:21
  
  Простите меня, если сбил вас с толку.
  Посмотрите в странице-примере на Demo5.
  Сначала нужно сформировать контент, который хотите прокручивать определенным образом.
```
<div id="p1" class="pagedemo _current" style="">Page 1</div>
<div id="p2" class="pagedemo" style="display:none;">Page 2</div>
<div id="p3" class="pagedemo" style="display:none;">Page 3</div>
<div id="p4" class="pagedemo" style="display:none;">Page 4</div>
```
  а потом прописать такой скрипт
```
$("#demo5").paginate({
				count 		: 10,
				start 		: 1,
				display     : 7,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press',
				onChange     			: function(page){
											$('._current','#paginationdemo').removeClass('_current').hide();
											$('#p'+page).addClass('_current').show();
										  }
			});
```
  Вы понимаете, что скрипт не будет просто так работать. Контент нужно обернуть элементами div с id равными p#, где # — порядковый номер страницы.
  И еще раз отмечу, контент загружается сразу и весь. Часть из него прячется с помощью свойства display:none;, а потом скрипт паджинации показывает определенный блок, при нажатии на кнопку с цифрой. Постарался объяснить наиболее понятно.
  0 0
  
  Ответить
Екатерина says:

16.05.2012 в 23:16

Написала следующий код на странице:
...
На странице отображаются
Page 1
Page 2
Page 3
Page 6
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
И внизу значки скриптов. Почему не отображаются сами цифры в черном стиле, по которым можно щелкать?
0 0

Ответить
Екатерина says:

16.05.2012 в 23:23

извините, что сообщениями закидала :(, пытаюсь код отправить сюда, а получается какая-то абракадабра. Подскажите почему не отображаются цифры как на сайте?
0 0

Ответить
- 2Web says:
  
  17.05.2012 в 01:09
  
  скорее всего у вас ошибка в скриптах. раз у вас все на битриксе крутится, то вполне jquery уже объявлен в header страницы, и повторное его объявление приводит к ошибке. значит не работает и скрипт паджинации. Но это только предположение. Вы можете посмотреть в браузере хром, файрфокс или опера, не выдает ли ошибку при загрузке страницы?
  0 0
  
  Ответить
Екатерина says:

17.05.2012 в 12:13

то есть я не могу на этой странице использовать lightbox, например, и скрипт паджинации вместе? А путь файла style.css не прописывается еще? может из-за этого не виден результат скрипта ?
0 0

Ответить
- 2Web says:
  
  17.05.2012 в 12:33
  
  Вы можете использовать любые плагины вместе. Просто нужно проверить не вызывается ли jquery два раза, или может быть ошибка в чем-то другом.
  0 0
  
  Ответить
Екатерина says:

17.05.2012 в 14:23

можно вам как-то скинуть на ящик страницу сайта с прописанными скриптами, а вы посмотрите правильно ли я написала? или может в чем-то ошибка
0 0

Ответить
- 2Web says:
  
  17.05.2012 в 15:38
  
  скидывайте на admin[ква]2web-master.ru
  0 0
  
  Ответить