2493 читателя, 137 постов
Администрация
Модераторы
Все прелести уникальной JS/AJAX библиотеки Jquery
Плагин постраничной навигации для jQuery (Paginator 3000 +)
Блуждая как то по просторам интернета я наткнулся на сайте миранды на интересный пагинатор. Реализованная в этом решении идея сделать пагинатор основанный на slider мне сразу же очень понравилась (я посчитал это очень удобным), и начал искать, что же это такое и с чем это едят.
Потратив немного времени для поиска в Google, я узнал, что этот зверь носит название paginator 3000 и изобрел этого монстра наш с вами соотечественник. Реализация paginator 3000 выполнена на чистом js скачать сам с скрипт и посмотреть примеры вы сможете на сайте автора. Так же в процессе своего недолгого поиска я наткнулся на статью в блоге Ярослава Бирзула (который посвящен юзабилити веб интерфейсов) на интересную статью про страничную навигацию. И тогда в моей голове возникла идея скрестить идею Ярослава и реализацию paginator 3000.
И так как я и еще пол мира привыкли использовать jQuery для работы с DOM я решил реализовать это все в виде плагина для jQuery. И собственно говоря вот, что у меня получилось:
А вот и способ использования:
И возможные параметры:
Примеры работы плагина можно посмотреть тут
Скачать архив с плагином и примерами тут
Ну вот собственно и все.
P. S. Не судите строго это моя первая статья подобно плана, так что буду рад любой критике.
Потратив немного времени для поиска в Google, я узнал, что этот зверь носит название paginator 3000 и изобрел этого монстра наш с вами соотечественник. Реализация paginator 3000 выполнена на чистом js скачать сам с скрипт и посмотреть примеры вы сможете на сайте автора. Так же в процессе своего недолгого поиска я наткнулся на статью в блоге Ярослава Бирзула (который посвящен юзабилити веб интерфейсов) на интересную статью про страничную навигацию. И тогда в моей голове возникла идея скрестить идею Ярослава и реализацию paginator 3000.
И так как я и еще пол мира привыкли использовать jQuery для работы с DOM я решил реализовать это все в виде плагина для jQuery. И собственно говоря вот, что у меня получилось:
А вот и способ использования:
$('#id).paginator(options) И возможные параметры:
options = {
pagesTotal : 100, //всего страниц
pagesSpan : 10, //количество отображаемых страниц
pageCurrent : 50, //текущая страница
baseUrl : './page/', //может принимать значение ссылки типа index.htm?page=
//или функции типа function (page_number){}
returnOrder : false, //если true выводит страницы в обратном порядке
//false выводит в обычном порядке
//массив переменных локализации
lang : {next : "Следующая",
last : "Последняя",
prior : "Предыдущая",
first : "Первая",
arrowRight : String.fromCharCode(8594),
arrowLeft : String.fromCharCode(8592)}
};Примеры работы плагина можно посмотреть тут
Скачать архив с плагином и примерами тут
Ну вот собственно и все.
P. S. Не судите строго это моя первая статья подобно плана, так что буду рад любой критике.
комментарии (63)
Я понимаю, что php-говно, но мускул не так уж плох как кажется и для стандартных задач очень подходит.
Сейчас в основном пользуюсь PostgreSQL.
Чтобы также динамично менять контент страницы
А чего судить? Скрипт весьма и весьма полезен, а это самое главное :) Спасибо вам.
Попробую на днях прикрутить к ne-kurim.ru/news/ А то там такой кавардак твориться.
бррр, часа два там провел
P.S. Давно юзаю paginator 3000, пользователи не жалуются :)
Правда немного его дорабатывал. А в частности на этом сайте допилили под Ajax и корректную работу кнопки «назад» браузера.
P.S: уже можно переносить в jQuery блог.
У нас очень было много споров о том, как всё же организовать нумерацию страниц: нужно ли выводить всё 1000 номеров или ограничиться видимым диапазоном — 1. 2...10 11...20. 50 и т.п.
Пользователю надо показать на какой странице он находится, показать возможность листать вперед-назад и показать сколько страниц всего. При желании добавить листание по диапазонам — 10..20..30..40…
В любом случае маловероятно, что пользователь перейдёт с 1 страницы на 536, особенно если он первый раз на сайте. Если же он уже был на 536 странице и хочет потом на неё вернуться, то поставит закладку.
а дублирование с <noscript> не должно отнять сильно много усилий так как ссылки просто списком вывести необходимо и этого хватит ботам поисковиков.
Если же я читаю, то читаю обычно по-порядку, страница за страницей. И если я нахожусь на 5 странице, то мне гораздо интереснее что будет на 6 или 7, чем на 382-й.
Я считаю, что это необоснованное усложнение. Забыть добавить в закладки, но не забыть номер страницы (трёхзначный).
У любого маломальски структурированного сайта есть теги, метки, оглавления, которые ссылаются на страницы или группы страниц и которые гораздо легче запоминаются и идентифицируются, чем ничего не говорящие номера страниц.
Когда я захожу на сайт номера страниц, к примеру 5, 29, 356 мне абсолютно ничего не говорят, я не знаю что на этих страницах, даже не могу предположить, поэтому осмысленно тыкать я туда не буду!
Гораздо важнее, если мне будут предоставлены какие-то обобщающие названия.
Пример:
Условие: вы ищете в списке элементов(пусть их будет несколько сотен), отсортированном по алфавиту или по дате, вы точно знаете название или примерную дату.
Варианты: можно либо листать по одной странице, либо воспользоваться «делением на два», это несложно даже для неискушенных пользователей.
Вывод — нужна точная постраничная пагинация.
Вопрос: Вы хотите иметь словарь/энциклопедию, которые позволяют листать по одной странице?
Примеры:
* не знаю как вам, а мне иногда на ресурсах любопытны вопросы типа как «А как распределена карма между людьми хабрсообщества?» В таком случае для быстрого анализа и составления представления удобно ткнуть, например, в 1, 10, 20, 50 страницы и посмотреть кто там, какой разброс и т.д.
* найти в списке, отсортированном по алфавиту, пользователя с ником «vasya_чтототам», при условии, что на ресурсе нет поиска по людям. Тоже сначала прикидываем, что буква v — это примерно 4/5 от алфавита, и сразу хочется прыгнуть туда, чтобы потом уже методом дихотомии найти исходное.
Ну да :)
На хабре уже каждая вторая статья содержит эти строчки…
Вам стоило взять дизайн, который я использовал в статье, и сделать плагин для Wordpress. Цены бы вам не было — сразу же поставил бы в новый дизайн :)
Во-вторых, когда страниц очень много (несколько тысяч), становится проблематично перескочить, к примеру, на 20 вперёд (нажимать 20 раз «следующая», конечно, не вариант). Если схватить бегунок мышкой, то сдвиг его на пару пикселей значительно изменит отображаемый диапазон: по сути дела начинается пиксель-хантинг. Когда количество страниц превысит некий предел, на некоторые вообще нельзя будет спозиционироваться (если сдвиг бегунка на пиксель приводит к прокрутке диапазона больше, чем на его ширину). Решается это как в классическом скроллбаре: клик на скроллбар должен перелистывать отображаемый диапазон на его ширину («на страницу» в терминологии скроллбаров). Колёсико мышки тут тоже, конечно, поможет.
Я ещё делал такую фишку, что дабл-клик по треугольному указателю на полосе прокрутки позиционирует его так, чтобы текущая страница оказывалась видима (по сути совмещая с пометкой текущей страницы) — дабл-кликнуть проще, чем совмещать самому, особенно когда страниц много.
Буду использовать.
Пожелания можно? :)
1. Ввести параметр «номер первой страницы». У меня, напримр во всех проектах первая страница — это page=0, так удобнее писать limit в SQL
2. Скроллинг мышью
в остальном вроде все очень аккуратно.
В пагинаторе используется адресация через page=…
У меня используется ЧПУ на сайте и мне надо использовать следующий адресс /page/…
Дело наверное тут var page = /page=([^#&]*)/.exec(window.location.href);
Не подскажите как должно быть чтобы работало с моей адресацией ?!
Наперед спасибо!
то вам достаточно в качестве параметра baseUrl указать следующйи адрес www.mysite.ru/page/ номер страницы будет подставляться в конце строки автоматом, если же вам необходимо генирировать более сложный url то используйте callback к примеру можно так
function(page_number){
window.location = 'http://www.mysite.ru/index.php?limitstart='+(page_number*100);
}, где число 100 будет являться количеством элементов на странице.
Но у меня основная проблема касалась больше регулярных выражений)
решилось следующим образом
var page = /[//]page[//]([^#&]*)/.exec(window.location.href);
и я не уверен, что нужен лидирующий слеш
Ясное дело, что я говорю про слеш в урле, а не в записи. У вас лидирующего слеша в комментарии нет, в посте есть. Видимо, не важно.
Так реализовал парсин урла
var page = /[//]page([0-9]{1,3})/.exec(window.location.href);
pageCurr = page? page[1]: 1;
Попытался внедрить себе. К сожалению, в Хроме на последних двух страницах slider_knob оказывается гораздо левее, чем должен быть — непосредственно поверх ссылки «Первая». В Opera и FF при этом все в порядке.
Не знаете, в чем может быть дело?
Ссылки пока нет, т.к. проект в разработке. Замечено также, что ошибка появляется с некой вероятностью около 50% — то есть может быть, а может и не быть. Странно. Возможно, глюк самого хрома.