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

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

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

   • как у вас все сложно.

     Понимаете ли, при тех стилях, что идут с примерами по умолчанию, цифры никак не должны выпадать в столбец. Там достаточно много CSS свойств отвечает за это. Поэтому трудно дать какой-либо совет по правке.

     Но если вам не трудно, то скиньте ссылку или архив вашей страницы на е-mail admin гав 2web-master.ru. Мы обязательно поможем!

2. Я думаю такой маленький кусочек кода, нет смысла отправлять по почте, да и мой сайт с интернета недоступен. :)

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

   1 2 3 4 5

   <div onClick="$('#demo4').css('display','block');"> <h1>Demo 4</h1> <div id="demo4" style="display:none;"> </div> </div>

   • Здравствуйте, Алиса. Решение оказалось простым.

     Дело в том, что по коду вы сначала прячете div c id="demo4", а потом запускается скрипт паджинации, который собственно и создает функционал и отображение паджинации.

     Чтобы цифры не убегали по вертикали нужно или перенести запуск скрипта паждинации в header сайта или перенести свойство display:none после запуска скрипта. Т.е. сначала надо чтобы запустился скрипт, после этого прячем элемент управления.

     Например, вместо

     1	<div id="demo4" style="display:none;">

     исправляем на

     1	<div id="demo4">

     а после строк

     1 2 3

     $('#p'+page).addClass('_current').show();   } });

     добавляем

     1	$('#demo4').css('display','none');

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

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

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

     <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>

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

   • Простите меня, если сбил вас с толку.

     Посмотрите в странице-примере на Demo5.

     Сначала нужно сформировать контент, который хотите прокручивать определенным образом.

     1 2 3 4

     <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>

     а потом прописать такой скрипт

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

     $("#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;, а потом скрипт паджинации показывает определенный блок, при нажатии на кнопку с цифрой. Постарался объяснить наиболее понятно.

5. Написала следующий код на странице:

   ...

   На странице отображаются

   Page 1

   Page 2

   Page 3

   Page 6

   Page 3

   Page 4

   Page 5

   Page 6

   Page 7

   Page 8

   Page 9

   Page 10

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

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

   • скорее всего у вас ошибка в скриптах. раз у вас все на битриксе крутится, то вполне jquery уже объявлен в header страницы, и повторное его объявление приводит к ошибке. значит не работает и скрипт паджинации. Но это только предположение. Вы можете посмотреть в браузере хром, файрфокс или опера, не выдает ли ошибку при загрузке страницы?

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

   • Вы можете использовать любые плагины вместе. Просто нужно проверить не вызывается ли jquery два раза, или может быть ошибка в чем-то другом.

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

   • скидывайте на admin[ква]2web-master.ru

9. Все встало отлично, но никак не могу разобраться куда прописывать ссылки на страницы, чтоб при нажатии «2» выходила 2 страница и т.д. На сайте не используется Mysql, php и ajax. Подскажите куда копать.

   • уже разбирали, как запускать

     2web-master.ru/jpaginate- ... -1#comment-15503

     • Спасибо за развернутый ответ, но я уже прочитал все предыдущие комментарии и если бы понял, то не стал бы спрашивать. Нужно чтобы при нажатии на кнопку 2 выходила не надпись «page 2», а открывалась 2 страница на сайте.

       • вы не сможете применить этот скрипт к открытию другой страницы на сайте. jPaginate работает только на стороне клиента, а вам нужен скрипт, который будет работать на стороне сервера.

10. Здравствуйте! Скажите, можно ли как — нибудь сделать, чтобы чтобы при переходе на другую страницу оказываться вверху страницы, а не оставаться внизу?