jpaginate

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

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

Пример Скачать (.zip, 68 Кб)

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

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

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

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


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

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

    Thumb up 0 Thumb down 0

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

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

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

      Thumb up 0 Thumb down 0

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

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

    Thumb up 0 Thumb down 0

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

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

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

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

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

      а после строк

      добавляем

      Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

      Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

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

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

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

      Вы понимаете, что скрипт не будет просто так работать. Контент нужно обернуть элементами div с id равными p#, где # — порядковый номер страницы.

      И еще раз отмечу, контент загружается сразу и весь. Часть из него прячется с помощью свойства display:none;, а потом скрипт паджинации показывает определенный блок, при нажатии на кнопку с цифрой. Постарался объяснить наиболее понятно.

      Thumb up 0 Thumb down 0

  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

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

    Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

      Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

      Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

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

        Thumb up 0 Thumb down 0

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

          Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

Оставить комментарий