Paginator 3000: постраничная навигация будущего

Итак, около полугода назад, для dirty.ru я накодил Paginator 3000: постраничную навигацию, основанную на очевидной, но почему-то никем не используемой, идее скролл бара. А буквально позавчера в Smashing Magazine вышла статья Pagination Gallery: Examples And Good Practices, в которой я с радостью обнаружил мой любимый пагинатор (=

Причем обнаружил его на самом почетном месте, в разделе Creative Solutions Can Be User-Friendly.


1024 pages

100 pages

50 pages

Пользуясь таким торжественным случаем, выкладываю исходники Paginator 3000 для всех желающих: .js и .css файлы снабжены комментариями и инструкциями по установке. Paginator 3000 протестирован в FireFox, Opera, Safari, IE6 и IE7.

Чтобы включить пагинатор, в <head> документа нужно подключить 2 файла из архива:

<link rel="stylesheet" type="text/css" href="paginator3000.css" />
<script type="text/javascript" src="paginator3000.js"></script>

А в <body> написать следующие строчки:

<div class="paginator" id="paginator_example"></div>
<script type="text/javascript">
	paginator_example = new Paginator(
		"paginator_example", // id контейнера, куда ляжет пагинатор
		2048, // общее число страниц
		10, // число страниц, видимых одновременно
		300, // номер текущей страницы
		"http://www.yourwebsite.com/pages/" // url страниц
	);
</script>

p.s. Идея делать навигацию по страницам в виде скроллбара изначально родилась в голове моего друга Максима Попова, автора фреймворка Reactor и создателя сервиса slil.ru

Комментарии (152) на “Paginator 3000: постраничная навигация будущего”

  1. endo:

    Спасибо, думал использовать, но разрешение не хотелось получать… ;) Зато теперь )))

  2. karaboz:

    Киньтесь ссылкой, когда что получится (=

  3. fayona:

    Спасибо большое, Karaboz, за этот паджинатор ;)
    он очень классный, креативный и удобный =)

  4. дмитрий:

    Поздравляю, отличная идея. И просто и нигде не видел до этого. Хотел бы использовать для своего сайта. Но в js сам не так силен. На первой странице создал var p = paginator(…); Как перерисовать paginator без перезагрузки страницы с новым параметром pageCurrent? (привязываю событие на клик по странице). Благодарен за ответ.

  5. NaFigator:

    А если у нас уже есть URL страниц, то не можем ли мы получать номер текущей страницы автоматически, не заставляя юзера брать переменную?

  6. karaboz:

    2 дмитрий:
    чтобы перерисовать пагинатор без перезагрузки страницы, просто вызовите p = new Paginator(…) еще раз с теми же самыми параметрами, что и раньше, изменив только один нужный вам параметр - текущий номер страницы. (=

  7. karaboz:

    2 NaFigator:
    Прошу прощения, я совсем не понял вопроса (=

  8. дмитрий:

    2 karaboz: спасибо, все верно, помогло. А не забьет ли повторное создание объекта память и не окажет ли влияния на быстродействие? Может написать p = null; p = paginator();
    Кстати, те, кто пользуется jquery, можно половину функций пагинатора упростить.

    Еще вопрос. Стоит ли дублировать пагинатор статическим html для пользователей, которые не используют js или на таких уже не надо ориентироваться? Уточню вопрос, он более общий чем данная тема. Каким пороговом значением для пользователя можно пренебречь при разработке "хорошего и дружественного сайта": 1%, 5% и т.п. (например, по общей статистике hotlog)? в разрезе использования js, браузеров, разрешений экрана, кук и т.п.?

  9. karaboz:

    2 дмитрий
    Честно говоря, я пока до конца не разобрался с тем, как правильнее всего обходиться с использованными объектами. Скорее всего, правильно будет сделать delete p; p = new Paginator (); // Во всяком случае, именно оператор delete отвечает за уничтожение объектов.

    Что касается вопроса поддержки пользователей с отключенным js - то в последнее время я несколько иначе формулирую эту проблему. Ориентироваться на проценты статистики мне кажется не совсем корректно - по многим причинам.
    Для начала, хотя бы просто потому, что посещаемость сайтов бывает очень разной, и для высоконагруженного сайта (с посещаемостью 50 тысяч пользователей в день) 1% составит 500 человек. А это, согласитесь, уже довольно много людей (=
    С другой стороны, решать проблему ссылкой на статистику мне кажется не честно с точки зрения педантичного и преданного разработчика (=

    Я бы рассуждал следующим образом. Если для вашего сайта наличие js критично - т.е. без его поддержки основные жизненные функции в нем работать не будут (например, если вам очевидно, что продублировав всевозможные аяксовые обработчики обычными формами, вы обречете пользователей сайта на бесконечный кошмар перезагрузки), то и заниматься поддержкой браузеров, лишенных js - бессмысленное занятие.

    Однако, если есть надежда, что пользователи смогут пользоваться вашим сайтом и получать от него удовольствие даже при отсутствии некоторых функций, которые обеспечивает js, то стоит обеспечить альтернативные функционал.

    В случае с моим пагинатором обеспечить альтернативный функционал совсем несложно. Достаточно просто вовнутрь <div class="paginator" id="paginator_example"></div> поместить обычный html пагинатор. Если у пользователя js работает, то вcя внутренность будет переписана заново (.innerHTML). Если же нет - то он увидит ваш альтернативный html пагинатор.

  10. ast:

    Надо будет тоже спиздить для своего сайта, когда понадобиться :-)

  11. hlomzik:

    по поводу сказанного NaFigator'ом - paginator ставится на странице вида http://site.com/page/5 с указанием урла http://site.com/page/
    соответственно, мы можем легко вычислять текущую страницу, отдавая код paginator'а целиком на совесть статичного шаблона

  12. and310:

    реально полезная штука, +

  13. f0x:

    Красивая штука не спорю, но фтопку эту красоту по одной простой причине.

    смотрим исходник контейнера
    ——-

    1024 pages
    ——-

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

    Благодаря таким "продвинутым" штукам теряем страницы из индекса поисковиков и соответственно посетителей.

    Ну а для хомяков пагинаторы не нужны

  14. karaboz:

    Хм… так в "исходники" можно положить обычный пагинатор со всеми ссылками для поисковиков (или же для юзеров с отключенными скриптами) (= Ведь пагинатор тупо заменяет innerHTML - он не пользуется данными, находящимися в "исходнике" (=

  15. f0x:

    Но согласитесь, если не сделать это по умолчанию в готовой выкладке скрипта, то пользователь сам не сделает это.
    К примеру на dirty не видно линков страниц, див пагинатора идет пустым

  16. karaboz:

    Ох да, в этом смысле вы абсолютно правы. На дерти требуется пагинатор дорабатывать. Спасибо (=

    p.s. Честно говоря, в тот момент, когда пагинатор прикручивался к дерти, я об этом совсем не подумал (=

  17. KirkA:

    Не могу разобраться вот с такой ситуацией:
    файлы лежат в /pages/ с расширением .html (4.html, 5.html, 6.html и т.д.)
    открываю файл index.html, перехожу по ссылки 2 и сервер ничего не находит, дописываю в браузере 2.html и всё ок.
    Как сделать так чтобы переходы по страницам работали?
    приношу извинение за столь несуразный вопрос :))))

  18. karaboz:

    В файле paginator3000.js найдите следующую строчку (260):

    html = "<span>" + "<a href='" + this.inputData.baseUrl + cellCurrentValue + "'>" + cellCurrentValue + "</a>" + "</span>";
    

    и замените на такую:

    html = "<span>" + "<a href='" + this.inputData.baseUrl + cellCurrentValue + ".html'>" + cellCurrentValue + "</a>" + "</span>";
    
  19. Alexey Babak:

    Спасибо за проделанную работу и открытый код!
    Я считаю, что с точки зрения практичности использования этот скрипт действительно можно назвать инновационным.

    Мы уже использовали его в паре проектов:
    http://artclinic.ru/consult/
    http://www.zdr.ru/news/index.html

    Планируем и далее использовать, а в последствии, возможно, включить в наш внутренний стандарт качества разработки.

    "Мы" — это я, http://babak.ru , и компания, в которой я на данный момент (начало 2008-го) работаю, http://www.ayaco.ru

  20. MiniM:

    Спасибо, очень классно!

  21. Белый Оптимизатор:

    Автор молодец. Правда, годик назад я делал похожую вещь. Чисто на CSS. В слой пишем в строчку ссылки, как обычно. А к слою стиль, который задавал жесткую длину слоя и создавал скролл. Наподобие фрейма получалось =) Но под вэб 2.0 - твой вариант как нельзя лучше подпадает :)

  22. ScREW:

    Отличная штуковина. Автору спасибо. Заходи на пиво.

  23. wmas:

    Замечательная вещь попробовал несколько усовершенствовать в вопросе с 260 строкой добавил новую переменную endUrl:

    function(paginatorHolderId, pagesTotal, pagesSpan, pageCurrent, baseUrl, endUrl){

    this.inputData = {

    baseUrl: baseUrl ? baseUrl : '/pages/',
    endUrl: endUrl ? endUrl : '.htm'
    };

    260 строка получилась такой:

    html = "<span>" + "<a href='" + this.inputData.baseUrl + cellCurrentValue + this.inputData.endUrl "'>" + cellCurrentValue + "</a>" + "</span>";

    Правда теперь пишет ошибку: 'Paginator' - определение отсутствует - гы-гы. Наверно лучше использовать какой-то шаблон в baseUrl, потому что варианты могут быть разные (имхо). А так респект и всяческое уважением автору.

  24. wmas:

    Сорь уже нашел ошибку плюсик забыл поставить:

    html = "<span>" + "<a href='" + this.inputData.baseUrl + cellCurrentValue + this.inputData.endUrl + "'>" + cellCurrentValue + "</a>" + "</span>";

    А вариат с шаблоновм вообще очень простой. Что-то вроде такого:

    html = "<span>" + "<a href='" + this.inputData.baseUrl.replace("{page}", cellCurrentValue) + "'>" + cellCurrentValue + "</a>" + "</span>";

    Может кому пригодится :)

  25. Zeux:

    Отличная штука! Спасибо! Очень скоро пригодится.

  26. Бездыханный:

    Используем, и сделаем сейчас вам ПР.

  27. Дмитрий:

    Штука опупенная. Как всё гениальное. Вроде решение простое, но какой эффект даёт.
    Вот только мне не очень нравится если страниц например 3. Отображается как-то не очень на мой взгляд… придумать бы что нибудь с этим …

  28. Fuksito:

    Приятный навигатор, работает отлично, прикрутил к системе комментариев у себя на сайте, вот к примеру мой профиль с пагинатором в виде листалки коментов:

    http://accords.com.ua/user/2

  29. Роман:

    Стрелочка реально лишняя.

  30. name1ess0ne:

    А не подскажете почему вместо номеров страниц в Internet Explorer появляется NaN?
    Причем после того, как пошевелишь ползунок, появляются номера и все работает хорошо.
    В других браузерах подобной проблемы обнаруженоне было.

    Вот сюда пытемся внедрить Paginator http://price.pliper.ru/tyres.php
    Надо нажать кнопку "Обновить"

    Заранее спасибо за ответ и за сам Paginator, идея очень понравилась.

  31. karaboz:

    name1ess0ne, Попробуйте рисовать пагинатор после полной загрузки страницы:

    <script type="text/javascript">
    window.onload = function(){
    	paginator_example = new Paginator(
    		"paginator_example", // id контейнера, куда ляжет пагинатор
    		2048, // общее число страниц
    		10, // число страниц, видимых одновременно
    		300, // номер текущей страницы
    		"http://www.yourwebsite.com/pages/" // url страниц
    	);
    }
    </script>
    

    Насколько мне не изменяет память, при табличной верстке в ИЕ неизвестна ширина таблицы до того момента, пока страница не загрузится полностью. Пагинатор же плотно завязан на этой ширине (=

  32. name1ess0ne:

    Спасибо, помогло =)

  33. relort:

    А можно как-нить прикрутить не вывод страниц, а допустим, массива произвольных строк? охоцца. О_о
    Что-то типа:
    new Paginator("paginator_example", строка1, строка2, строка3, …

  34. karaboz:

    relort, я думаю, в этом нет больших проблем (=
    Надо лишь немного дописать код пагинатора.

    Отрисовка текущих "страниц" происходит в функции Paginator.prototype.drawPages. Там, где цикл вставляет в ячейки таблицы цифры, легко вставлять данные из любого переданного массива, используя эти самые цифры в качестве индексов элментов массива (=

    В этом случае общее число страниц должно вычисляться как длина передаваемого массива. Остальные параметры по-прежнему зависят от потребностей и желаний разработчика (=

  35. relort:

    Дааа. Этааа тааак :) Чёрт, с жабой ни работал никогда. Будет боевое крещение :) Чортчортчорт. Пайду смотреть, чо там и как =)

  36. Санеkk:

    Актуально написано. А вообще, поздравляю автора блога и всех его читателей с сегодняшним праздником - Днем России. Ура, товарищи! :)

  37. Naraka:

    Спасибо огромное! Ваше творение — прекрасно.

  38. Алексей:

    В Internet explorer косячит скрипт. Вместо цифр выводится Nan и ползунка не видно. Как я понял, нельзя вкладывать скрипт в таблицы?

  39. karaboz:

    Алексей, в таблицы вкладывать можно (=

    Однако в этом случае инициировать пагинатор нужно так, как описано в этом моем комменте - через window.onload

  40. Алексей:

    Спасибо - заработало, ещё вопрос. Вы говорите, что для поисковиков можно кинуть ссылки в "исходники", можете объяснить, как это сделать в наиболее правильном варианте?

  41. karaboz:
    <div class="paginator" id="paginator_example">
    // Тут дOлжно расположить обычный html пагинатор,
    // который бы работал, не будь у вас paginator3000.
    // JavaScript заменит этот код своим собственным,
    // а поисковик пойдет по ссылкам html пагинатора
    </div>
  42. Алексей:

    Спасибо! Всё работает.

    Пожелание:когда мало страниц, постраничка действительно смотрится не ахти как :( Может с этим что-нибудь сделать? Есть мысли?

  43. karaboz:

    Например, можно упомянутый выше html пагинатор (который для поисковиков), стилизовать целиком под JS пагинатор, но не растягивать в нем таблицу на 100%. А перед инициализацией пагинатора3000 проверять, если количество страниц меньше какого-то числа - не инициализировать пагинатор вообще. Пусть отрисовкой небольшого количества страниц занимается html пагинатор (=

  44. George:

    karaboz помоги пожалуйста я начинающий и много не понимаю я создал php сайт как можно сделать чтоб он у меня заработал…

  45. George:

    не сайт а паджинатор =)

  46. karaboz:

    George, а вопрос-то сформулируй поточнее, что именно не получается? (= Тогда и помочь наверное смогу (=

  47. George:

    извиняюсь!!! вот такая проблемма: у делаю сайт на php но не знаю как всавить паджинатор чтобы он автоматически переходил на другие страницы…типа loclhost/coolste/soft.php?page= …. вот тут пажинатор конечно проставляет page=1 page=2 и т.д. но я не могу его застваить стоб он переходил на эти ссылки и на page=2 показывало вторую страницу может какой нибудь код ещё надо добавить или базу ещё с какими нибудь данными….=)

  48. karaboz:

    Сам по себе паджинатор не создает страниц - это работа для PHP. Для начала вы должны создать постраничную разбивку без всякого паджинатора. И после того, как заработают ссылки на страницы - только в этот момент и подключать паджинатор. Его задача лишь красиво оформитть, отрисовать.

  49. qfox:

    Автору спасибо за идею).
    Молодца.

    Возможно, есть смысл реализовать в пагинаторе динамическую подгрузку в заранее указанный блок содержания страницы N. Ну и, естественно, нужно не забыть про пользователей без скриптов (только, это к пагинатору практически не относится).

  50. сергей:

    Баг в ИЕ6:
    У меня над пагинатором есть блок (DIV). Высота блока 30 пкс
    При нажатии на кнопку блок разворачиваеться вниз еще на 200 пкс,и пагинатор опускается тоже вниз, но не весь - скролер остается на месте и налазит на блок.
    Думаю, это связано с CSS для скролера (position:relative). Можна ли както это обойти?

  51. sergey:

    Проблему решил, для таблицы убрал свойство
    table-layout:fixed; в ИЕ6 и ФФ3 нормально работает

  52. karaboz:

    Отлично! (= А ссылку не дадите, где используете? (=

  53. mifody:

    2 karaboz

    Не зря в Smashing Magazine на самом почетном месте разместили. Пагинатор оригинален и удобен!
    Спасибо большое!

  54. John:

    Hey karaboz,
    I love the pagination it's awesome. Is it possible to add it to a wordpress blog? If so detailed instructions will be most appreciated.

    p.s I'm sorry I'm writing in English it's just that my Russian isn't so great.

    Keep up the good work,
    John

  55. karaboz:

    Thanks John! (=
    I am sure it's very easy to use paginator 3000 in wordpress. But first of all you need to find some plugin which could show you all pages of your blog. If you find that we can set paginator very fast (= I could help (=

  56. John:

    Thanks for the quick reply. In wordpress there is a template Tag called wp_list_pages() . It displays a list of WordPress Pages as links. I fount it here http://codex.wordpress.org/wp_list_pages . can that help?

    thanks,
    john

  57. karaboz:

    I think you found too complicated plugin (= I found lighter and rather amazing navigation plugin. Look here: http://wordpress.org/extend/plugins/wp-page-numbers/

    If you install this and show me your blog I will be able to customize my paginator for this page plugin (=

  58. John:

    Thank you very much, the plugin you found is great. My blog is at http://www.superenlightme.com

  59. ChVL:

    Лучший, IMHO, paginator среди всех, что пришлось видеть, включая те, что используют монстры поисковых систем.
    Решение проблемы с расширением страниц (типа /2.html) нашёл здесь - всё работает. Без расширения понимает только IE, для других же браузеров (например, Firefox) оно необходимо.
    С одним моментом не разобрался: как правильно сделать переход с любой другой страницы на первую? От папки pages пришлось отказаться, т.к. в этом случае в неё надо копировать под именем 1.html первую страницу index.html со всем её обслуживанием. Но и в корне сайта приходится тоже делать копию (хотя и без обслуживания).
    А можно первую страницу вместо 1.html сразу указать index.html? Естественно, путь должен быть прямо в корень, без папки pages.

  60. dzhus:

    The idea is simply brilliant. Thank you man.

  61. Влад:

    Случайно нашёл в заметках на гугле вашу статью и вспомнил, что на друпал.ру кто-то спрашивал именно такое решение. А именно тут: http://drupal.ru/node/21543
    При этом возникла идея сделать обратную нумерацию страниц. То есть самые первые посты будут на первой странице, а самые свежие на странице с наибольшим номером.
    Это необычно, но и ваше решение тоже оригинально.
    Преимущество в том, что поисковики индексируют эти страницы и посты не них всегда остаются на своем месте, а не скачут со страницы на страницу при добавлении новых постов.

    Если я программно (в движке) сделаю обратную нумерацию, то как это можно прикрутить к вашему скрипту?

  62. karaboz:

    Да, идея с обратной нумерацией мне тоже нравится. Заставить скрипт рисовать в обратной последовательности несложно. Кажется, надо переписать одну функцию Paginator.prototype.drawPages.

  63. Jomhan:

    Ваше сотрудничество с John-ом породило плод? Есть ли возможность Ваш плагин настроить под wordpress?

  64. Влад:

    karaboz,
    я, к сожалению, не силен в JS - знаю PHP, Drupal и MySQL. Поэтому могу переделать код на вывод обратной последовательности, хотя это и будет хаком ядра Друпал.
    Но вот что касается вашего скрипта, то, если не сложно подскажите подробнее что нужно менять.

    В Друпал используется jQuery и в одном из первых комментариев кто-то писал, что в этом случае скрипт можно сильно упростить. Опять же любые советы на эту тему будут очень кстати.
    Спасибо.

  65. Flamber:

    Karaboz,

    Отличное решение для постраничной навигации.

    Мы использовали его на Фламбере. http://flamber.ru/photos/@225/*small . Получилось просто здорово.

    Спасибо!

  66. WayBe:

    Большое тебе спасибо, karaboz.
    Пользую на www.kaniv.net, и очень нравится.

  67. dzhus:

    Хотел спросить можно ли распространять paginator3000 с изменениями в исходном коде? Если да, то какие условия и требования?

  68. karaboz:

    2 Влад
    Прошу прощения, но сейчас никак не смогу помочь вам с видоизменением своего скрипта (для обратной нумерации). Очень много других забот =( Но любой яваскритер с легкостью справится, я уверен (=

  69. karaboz:

    Очень рад за тех. кому нравится этот пагинотор и кто использует его на своих страницах (=

    2 dzhus
    Вы можете как угодно его использовать (= У меня нет четко выраженных авторских амбиций (=

  70. karaboz:

    2 Jomhan
    Боюсь, что сейчас у меня не так много времени. чтобы замутить плагин для wordpress… Хорошо бы, чтобы это сделал кто-то, кто занимается такими вещами (= Как я говорил, у меня никаких амбиций по поводу идеи пагинатора нет (=

  71. dzhus:

    Немного изменил дизайн пагинатора для собственных нужд, но может кому-то пригодится. Скрин: http://blog.dzhus.com/wp-content/uploads/2008/12/paginator3000screenshot.jpg и соурс: http://blog.dzhus.com/wp-content/uploads/2008/12/paginator3000.zip/

  72. karaboz:

    Красивый скин (= А в действии можно бы увидеть где-то? (=

  73. dzhus:

    http://dzhus.com/development/demos/paginator3000/ пробуйте :)

  74. Константин Коновалов:

    Спасибо за идею! Так как пишу в последнее время на mootools, то решил переписать ваш код.
    Может, кому-то пригодится http://clproject.info/archives/634

  75. dzhus:

    Создал небольшой плагин позволяющий вставлять пагинатор в Wordpress. Линк: http://wordpress.org/extend/plugins/paginator/

  76. karaboz:

    dzhus!!! Класс!!! Вы создали то, чего все так ждали! (= John, do you see this? (= Пойду напишу ему в его блог (=

  77. forex-man:

    У меня вопрос:
    Если я продаю ссылки с сайта через Sape, будут ли индексироваться страницы его роботом как 2ув. И если нет, то что можно сделать?
    А так идея просто супер, pagenavi отдыхает.

  78. Alexey:

    Установили себе на сайт. Можете посмотреть это чудо в работе: DREZ.RU

  79. Дмитрий Sharp:

    А зачем данный плагин нужен, если есть уже стандартный пэйджнави??? 1000 страниц, хм, не многовато ли для пользователя? Они и 3 обычно не смотрят, а тут 1000, да ещё и на джаваскрипт. Объясните плиз.

  80. Гаджеты:

    Супер пагинатор и отличный плагин! Спасибо!
    теперь стоит на devicegadget.ru

  81. AlexPTS:

    Выглядит интересно )

  82. Ikar:

    Скажите, а из-за чего может вылезать вместо цифр "NaN"

  83. karaboz:

    А вот посмотрите, не в этом ли ваша проблема?
    http://karaboz.ru/2007/11/19/paginator-3000-postranichnaya-navigaciya-budushhego/#comment-108

  84. Ikar:

    СПасибо за помощь (помогло:) и замечательный скрипт

  85. Alex:

    так вот кто создал этот бар для БД :)

  86. qik:

    Здравствуйте, скажите пожалуйста как мне корректно отобразить новигатор? То есть чтобя у меня нумирация начиналась не с 1 а с последней страницы.
    Я пытался сам ковырять но у меня вечно какие-то косяуи выходят.
    Помогите пожалуйста.

  87. dimianstudio:

    класс скрипт, спасибо, поставил у себя на сайте, просто красота

  88. denis:

    У меня тоже пояляется "NaN" в FF, только все советы, которые здесь приводились не помогают

  89. Arctic:

    Hi, thanks very much for your amazing paginator plugin and I like it very much. I have fixed a bug about slash in permalink of your amazing paginator plugin. Although my blog is written in Chinese, it does not matter.

  90. lilumi:

    спасибо за обновление плагина и спасибо китайцу за исправленный баг!

  91. Олег:

    Добрый день!

    C чем может быть связано следующее: 4-ый Safari отображает скрипт на этой странице, а локально он почему-то не работает. Однако FF и Opera локально скрипт запускает.

  92. saintist:

    пагинатор смотрится очень современно !

    karaboz подскажи в обратную сторону нумерацию как в нем сделать, чтоб первая тема была с максимальным id

  93. saintist:

    вариант на mootools с реверсной нумерацией не подходит, придерживаюсь мнения что ради такой фишки не стоит использовать монстра в качестве костыля )

  94. saintist:

    строку

    this.html.tdsPages[i].innerHTML = html;

    заменил на

    this.html.tdsPages[this.html.tdsPages.length-1-i].innerHTML = html;

    нумерация стала реверсной осталось разобраться с позифионированием фидера )

  95. saintist:

    шаг 2

    меняем

    if(this.html.pageCurrentMark.widthActual

  96. saintist:

    в js я несилен )) но собственно вот реверсный пагинатор

    http://portfoliant.com/js/paginatorreverse.js

  97. stranger:

    У меня в Опере и Ие всего по две страницы показывает, а в мозилле все ок. В чем может быть проблема?

  98. Vadusha:

    Подскажите пожалуйста, как сделать чтобы пагинатор сам определял номер текущей страницы и не нужно было проставлять его в коде вручную.

  99. Vadusha:

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

  100. p3p51man:

    вообщем у меня есть небольшой сайт-каталог(построен иключительно на ХТМЛ и КСС, так как больше ничего не знаю) в нем есть категории-товаров:
    1 наушники(тут 3 страницы)
    2 сумочки(тут 2 страницы)
    3 аксессуары(тут 4стрницы)
    4 и тд
    современем они будут все расширяться.
    -нужно сделать так чтобы эти элементы по отдельности расширялись и работали независимо друг от друга.
    - что бы новые недавно поступившие товары оттесняли старые в конец.
    вообщем нужно сделать что то типа каталога.

  101. Пасха:

    Ты крутой! Спасибо за отменный скрипт! Буду использовать!

  102. Илья:

    У меня есть сайт http://www.ikariam.wt8.ru/ - тема стоит OverEasy, как установить Paginator на этой теме, куда и чего прописать, уже измучился, не знаю что делать, помогите пожалуйста. Заранее спасибо!

  103. Developer:

    Отличная тема!

  104. dima117:

    идея использовать скролл - просто супер!
    появляется возможность легко и быстро перейти к нужному номеру страницы.

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

    вариант по ссылке http://dzhus.com/development/demos/paginator3000/ не только отличается внешне, но и намного удобнее, потому как больше похож на полосу прокрутки. большинство знакомых сразу поняли, как им пользоваться и легко перешли на нужную страницу.
    думаю, нужно двигаться дальше в этом направлении.

    спасибо за замечательную идею и скрипт!
    если вы не против, попробую на досуге сделать контрол для ASP.NET на основе Вашего скрипта.

  105. Иван:

    Спасибо огромное! В поисках наилучшего решения перебрал с десяток вариантов — установил Paginator, удобно и современно.

  106. volontaire:

    Добрый день, у меня вопрос, никак не разобраться.

    У меня навигация сделана так - в адресной строке не номера страниц по порядку, а переменная $from с числом внутри и скрипт отсчитывает от этого числа 10 записей на страницу. (типа как в ЖЖ). Можно ли к ней прикрутить пагинатор? И если нет, может быть есть ссылка на какой-нибудь мануал по созданию навигации к которой пагинатор подойдет?

    Заранее большое спасибо.

  107. Serg:

    Привет!

    Здоровская вещь!
    Поставил себе
    Хотел сверху и снизу, а работает только верхний.
    Может чего где-нибудь поправить?

  108. Serg:

    Привет!

    Здоровская вещь!
    Поставил себе
    Хотел сверху и снизу, а работает только верхний.
    Может чего где-нибудь поправить?
    Сайт работает на wordpress.

  109. Kafeinka:

    Плагин действительно замечательно работает во всех браузерах до IE8 ((
    В IE8 возникают джаваскриптовые ошибки вроде "Объект не поддерживает данное свойство или метод".
    Пока не разобралась в чем именно проблема.

  110. Kafeinka:

    Наверно важное замечание - везде на сайте использую jquery…

  111. Alinaki:

    А реверсного пагинатора ни у кого не осталось? По ссылке выше его нет :(

  112. Акробат:

    Огромное спасибо отличный пагинатор!

  113. Leo:

    Kafeinka:
    мы в ие6 на подобную ошибку наткнулись.
    поправили:
    paginator = new Paginator(…
    на
    var paginator = new Paginator(…
    ошибку ие больше не показывает.
    ну и поместили инициализацию в onload, чтобы NaN не мозолил.
    скрипт симпатичный, пользуем дальше, спасибо авторам.

  114. Eltner:

    Прочитал - и осознал собственное несовершенство. Хороший ресурс.

  115. Gako:

    Привет!
    У меня в эксплорере не отрисовывает странички.
    Opera, mozzila - всё ок, а IE выдаёт следующую фигню:
    http://dim-partner.com/sshot-105.gif
    в чем может быть причина?
    подскажите пожалуйста.

  116. Gako:

    Да, кстати, когда много страниц и доступна полоса прокрутки, то во время прокрутки, номера страничек отрисовываются и становятся такими, как нужно.

    IE 7

  117. Gako:

    Прошу прощения, нашел решение на этой страничке: пользователь - name1ess0ne.
    Спасибо.

  118. Snowcore:

    Отличная идея! Пейджер суперский!

  119. MaryLee:

    Неплохая штуковина

  120. Джина:

    Да, мне тоже нравиться

  121. AnAmile:

    Надо поробовать куда-то это прилепитьт

  122. димс:

    Спасибо за такую уникальную навигацию

  123. Elizaveta:

    Очень оригинальное решение мне понравилась ваша реализация

  124. Vela:

    а че мне нравится!!! автор молодец!5+

  125. Germusya:

    Спасибо все просто супер!

  126. Константин:

    Спасибо)

  127. iddqd:

    А как прикрутить сие чудо к Joomla! 1.5 ? =)

  128. Камил:

    А можно поподробнее, в каком виде должен быть код для индексирования поисковыми ботами?

  129. Дмитрий:

    Как изменить ссылки на страницы http://www.yourwebsite.com/pages на свои, если на сайте есть ссылки в виде http://www.yourwebsite.com/index.php?do=cat&category=auto, http://www.yourwebsite.com/index.php?do=cat&category=auto2 и т.д?
    Использую CMS DLE.

  130. Kirill:

    Полезная вещь. Спасибо. Надо будет попробовать.

  131. KeTal:

    Спасибо огромное! Супер - полезный скрипт и здорово сделан. Использовал в разработках.

  132. Josiah Platt:

    I don't speak russian, but this plugin is awesome.

    : love and huggles :

  133. Владимир Данилов:

    Хочется выразить благодарность автору, плагин действительно юзабельный :)

  134. Макс:

    Нашёл ещё один баг - в Хроме (по крайней мере в нём) не всегда правильно берётся свойство offsetWidth (для ползунка и всей таблицы) из-за чего неправильно позиционируется ползунок и отметка текущего места. Аффтару решение - вычислить один раз эти величины при ините и просто пользоваться ими, а не достукиваться до свойств элементов. Свой переработанный код не выкладываю потому что он уже ОЧЕНЬ переработан (включая ползуночек и т.д.). Всё никак не соберусь переделать его на jQuery как плагин, было бы очень интересно.

    Зы - при вводе капчи маленькими буквами вылазят ворнинги - хоть отключи вывод ошибок

  135. Nazar:

    спаибо большое

  136. AliveIT:

    Спасибо! Классная штука =) Обязательно применим в своих разработках

  137. freezz187:

    Да… Полезная вещь!!!!

  138. Камил:

    Не могу разобраться, нужна помощь. Почему-то слайдер получается намного шире чем мне нужно, где можно регулировать размер слайдера? Страница здесь:

    http://www.ikamil.ru/info/sxema/nofert/1.htm

  139. Камил:

    Спасибо, разобрался.

  140. Bismuth:

    Всем доброе время суток!
    Объясните мне чайнику, что нужно писать в стиле .CSS и что нужно писать в .JS. Я просто не давно начал изучать языки программирования, а лучше скиньте мне на почту к этому html прикрепленные стиль и JAVASCRIPT, я бы вам был бы он благодарен…

    Paginator 3000 by karaboz

    1024 pages

    pag1 = new Paginator('paginator1', 1024, 10, 300, "");

    100 pages

    pag2 = new Paginator('paginator2', 100, 13, 70, "");

    25 pages

    pag3 = new Paginator('paginator3', 50, 15, 15, "");

  141. Bismuth:

    а вот моя почта bismutx@rambler.ru

  142. Del:

    Всем привет!
    Как мне избавится? у меня вместо цифр наисано NaN, а цифры появляются когда дергаешь за ползунок

  143. Вася:

    Респект за плагин,очень помог!

  144. freezz187:

    Наконец-то и у меня дошли руки установить плагин на сайт. Выглядит прикольно и необычно. Буду советовать знакомым. Автору РЕСПЕКТ.

  145. Holodkov:

    Paginator 3000 адаптировали под Blogger. Если интересно, то можно посмотреть на странице блога. Раздел Помощ Blogger-y.

  146. best_seo:

    Спасибо. Класный плагин.

  147. Fox:

    прикольнная навигация, автору респект

  148. dimasafo:

    Это, наверное, самый удобный постраничник, что я видел. Спасибо автору! Возможно, буду использовать…

  149. newuser:

    Реально автору респект! БД и Лепрозорий невозможно представить без этого плагина. А я то думал что это придумал Йован.

  150. Attalib:

    Hello
    thanks so much for this plugin .
    but the issue is how making the slide working from right to left?
    hope you ll answer me sooner
    thnx

  151. antohabio:

    Скажите, а как перевести pages (там где общее число страниц). Не могу нигде найти!!!
    Заранее благодарен.

  152. Aleks:

    возникла проблема в ИЕ 6, в том что когда ползунок двигаю то он момнетально после сдвига возвращается на исходную позицию.

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