Abilities plugin
- You can use touch and mouse swipe navigation
- You can use different types of the pages change
- State of active page is saved in the History API
- You can use different sets of controls: numbers, arrows, point, progress bar, and a field for entering the desired page
- You can use one of the ready-made themes
- You can improve the appearance of not only text, but also images or lists
- Using a large number of different parameters and methods, you can create a candy instead of boring text
SETS OF CONTROL ELEMENTS
Classic
Classic of Pagination consists of a set of buttons, such as "Home", "Previous", "Next", "Last page" button, and of course - the page numbers. Also consists a block of page status. Each item is a separate and independent element, which can be displayed anywhere on the page or not display at all.
Go to Page
To quickly jump to the desired page - enter the page number in the box and click "OK".
Light
This set is perfect navigation suitable for a small number of pages, when enough simply turn the pages back and forth
Ultra Light
This is the most minimalist view of the controls, similar to the one that you used to see in the sliders.
Nambers only
This control is useful if you need to have quick access to all pages. This type of control is suitable for large text, and for small posts
Shoulders
This kind of control is minimized due to the absence of buttons with page numbers.
Dotted
This is a stylish and modern look of management of pages. It takes up very little space, but it is very functional.
Progress Bar
This is not a standard type of pagination. With it is possible to estimate the percentage of readed pages.
Custom
Control elements not necessary to register in the plugin. You can manually add any control to any location of code, but it is necessary to specify unique name of the pagination block in the data-href attribute, and transition identifier. As a control button, you can use any html element: a, button, span, div, img and other.
Full
This set of controls combines the classic look and a block for bystoro transition to the specific page.
TYPE OF CONTENTS
Only Text
If you are using a plug-in to block that contains only text nodes, the text will be divided into parts by a dots if they are in the text. If the text is not points, for the separation of the text you need to specify the character in the parameter "splitSymbols", such as space, letter, or other
Tags
If you are using a plug-in to block that contains paragraphs tags or other html tags with text, the text will be divided into parts by this html tags.
Images
Plugin equally well splits on the page as tags for formatting text and image tags. Keep an eye on the behavior of the image height using CSS styles
List
list is splitted as other tags. The most important thing is that the list of elements is a child of the initialization element
MORE DEMOS
Multiple
On one page may be several blocks with page navigation. And each of this blocks can have your settings
Custom Start Page
This parameter specifies the number of the page to be displayed after the first download site
Custom Easing
This parameter specifies the easing of animation when changing pages
Animation Effect
This parameter specifies the type of animation when changing pages
Auto Switching
Using the methods and events of plugin, you can gather cool ticker for text or image
Комментарии
Спасибо за внимание к плагину. Баг устранен. Скачайте архив заново.
Спасибо за оперативную реакцию!
К сожалению, сейчас при нажатии кнопки "назад" возникает сообщение Строка: 213
Ошибка: 'console' - определение отсутствует. Кроме того, поведение плагина немного в MSIE8 немного отличается от других браузеров: нижняя часть блока вывода текста скачет в зависимости от содержимого. В хроме она фиксированная и если текста больше, он переносится на другую страницу.
На 213 строке был вывод параметров для дебага, забыл сразу убрать :) - убрал.
Проверил в IE7,8,9 - все работает как часы. Возможно что-то закэшировалось, но на всякий случай сделал инициализацию плагина через $(window).load(). Перекачайте и проверьте пожалуйста
Цитирую Артем:
Прошу обратить внимание что разделение текста на страницы происходит группировкой его внутренней html структуры. Проще говоря разбивайте текст на абзацы с помощью тега "p". И учтите что для плагина это неделимый элемент и если он по высоте не вмещается в текущую страницу, то целиком переносится на следующую
Помогли решить проблему. Суть в том, что есть отличие в понимании высоты в MSIE и других браузерах. Нужно было поставить padding:0 для всех элементов, помещаемых внутрь пагинатора. При ненулевом паддинге высота в MSIE8 считается некорректно и текст начинает вылезать. Расстояние между абзацами можно менять тогда при помощи margin.
Последняя проблема: если страниц так много, что кнопки переключения занимают несколько строк, текст внизу вылезает за границы, отведенные pageHeight=(
Добавлен параметр maxPage, который может принимать любое нечетное число. По умолчанию видны лишь 11 страничек в навигации.
Также добавлены кнопки "Last", "First"
Перекачайте архив http://narod.ru/disk/64794044001.ebfe1d8bae5b54bb05e05c5d2146e23c/liPaginate.v4.zip.html
Пожалуйста, заходите, у меня еще много интересного
28.05.2013 - Добавлена возможность размещать ссылки на нужные страницы.
Скачайте заново архив
1. Какой тэг?
2. Киньте ссылку, разберемся
pHeight = ($(window).heig ht() - 100) поменять на -200 и больше
У меня сайт на Joomla 2.5, подключил скрипты в шаблон,в контенте
. Но нечего не работает.В какой каталог надо разархивировать архив?
Не важно в какой каталог. Главное чтобы правильно был прописаны пути к файлам:
jquery-1.8.min.js
jquery.easing.min.1.3.js
jquery.liPaginate.js
К тому же если у вас в joomla уже подключена библиотека jquery,
то "jquery-1.8.min .js" подключать не нужно.
И не забудьте про стили.
Интересует один вопрос: можно ли сделать так, чтобы при переходе на следующую страницу выполнялся скролинг к топу текстового блока. Потому что, если установить большую высоту текстового блока, пользователю приходится самостоятельно прокручивать к топу, при навигации расположенной после страниц.
Пока возьмите отсюда:
http://jsfiddle.net/yurik417/GdhXs/41/
В ближайшее время занесу в релиз
Такой возможности нет. Но я учту ваше пожелание в следующей версии плагина
со статическим текстом все норм, если что. Жду ответа, спасибо.
В этом примере: http://jsfiddle.net/yurik417/GdhXs/42/
Я подгрузил код jQuery и разбил его на страницы
Что-то не понял всё равно.
http://pastebin.com/u77afhPX
Вот так я оборачиваю макет таблицы (просто пример), и после, уже в аяксе, вставляю в нее строки. Все равно отображает по 1 странице, но обрезает нормально.
Уточните.
Вы хотите разбить на страницы текст внутри таблицы или строки таблицы?
Саму таблицу. Вот еще, что заметил: если повесить функцию на кнопку, после первого нажатия появляется пагинация с 1 страницей, при последующем нажатии появляется нужное число страниц, но работает так же только первая, на остальные переходит, отображая пустую таблицу.
Спасибо, что следишь за темой.
К сожалению этот плагин не рассчитан на пагинацию таблицы. Я использую для таких случаев плагин "data tables"
http://www.datatables.net/
Спасибо за ответ! Удачи в дальнейших работах, сайд в закладках.
> сайд
сайт, конечно.
Столкнулся с не совсем корректной работой в родном браузере IPhone 4S и IPhone5.
Проблема заключается в том, что текст занимает только около половины блока. Соответственно, количество страниц увеличивается в два раза по сравнению с десктопными браузерами.
Как образец:
http://www.gorodsobak.com/articles/30.html
Возьмите скрипт отсюда:
http://jsfiddle.net/yurik417/GdhXs/48/
Я добавил там маленький хак для мобильных устройств.
Подключение мобильного JQuery проблему не решило :(
Так же, замечено, что пагинатор перестает перелистывать при добавлении на страничку виджета hypercomments.c om
Возьмите отсюда:
http://jsfiddle.net/yurik417/GdhXs/60/
Благодарю
весом на 600-700кб
хоть с тэгом хоть без него не развивает текст постранично а выдает полотно на 3-4 часа скролинга
В maxPage выставил 71 толку 0, поясните пожалуйсто что я делаю не так (новичок обсолютный)
Пример с большим текстом
http://jsfiddle.net/yurik417/GdhXs/61/
Класс для родителя тоже указываю уникальный.
Решить можно.
Забирайте:
http://jsfiddle.net/yurik417/GdhXs/68/
Но, все же мне, как очень начинающему, не удалось правильно создать страничку - http://ulybka.ml/multipage-3.html
Скриншот - http://joxi.ru/p276bg3FYwZ6m7.
Как убрать лишнюю навигацию (3-ью), которая почти не видна из-за текста. И как уменьшить расстояние между текстом и нижней навмгацией?
Каким образом можно "Главу №" заменить на "Раздел №" и как включить подразделы?
Я использовал файлы ZIP и добавил http://jsfiddle.net/yurik417/GdhXs/68/
Так там почему-то тексты в главах 2, 4, 5 идут до заголовка, а не после. А в главе 3 - и до и после...
Замените в строке
$('h2:contains("Глава")',liPaginateEl).each(function(){
слово "Глава" на "Раздел"
вы два раза инициализируете плагин: 1 раз в теге и 2 раз в файле плагина вконце
Спасибо, все получилось. Но пробовал вставлять код на действующий html сайт, почему-то пагинация не появляется. Возможно я в css что-то не так вставляю. Вы могли бы мне подсказать с css? Если да, то куда мне лучше мой css выложить?
можно на http://jsfiddle.net
Поподробнее
Например, поставить форму быстрого перехода к нужной странице, или при нажатии на условную кнопку "закладка", запоминалась страница, на которой пользователь остановился.
RSS лента комментариев этой записи