Вёрстка паджинатора с переменным количеством страниц

[Veseloff]

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

1. Страница резиновая. Немного упрощает жизнь то, что она не полностью резиновая, а от 1000 до 1300, но ширина переменная.

2. Ссылочек надо показать столько, сколько влезает на отведённое место, которое резиновое.

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

4. Если показывается первая или последняя страница, то точки только с одной стороны.

Прилагаю скриншот. http://borber.ru/htmlbook/paginator.png

У кого есть какие умные мысли? Вопросы задавайте, если непонятно.

[ShumNo]

Может быть вопрос не совсем относится к верстке, вернее вообще не относится? Не увидел просто сложностей

[Veseloff]

Относится и очень даже Я реально не понимаю как это сверстать правильно.

P.S. Советовался в первую очередь с коллегами — тоже не нашли правильного решения. С ходу кажется, что всё просто, но когда начинаешь рассматривать варианты, то в каждом обнаруживаются свои косяки.

[Igor Schnaider]

Без JS, пожалуй, никак.

[sigma77]

пре-альфа вариант ) - https://jsfiddle.net/go5k5tLk/1/

а вообще задача интересная, вечером надо будет поломать голову

[Veseloff]

Очень интересная В преальфе если начинать раскукоживать, то может вылезти одна цифра из двузначного числа. (1 2 3 4 5 6 7 8 9 1) В нижней строке похоже на правду, но точки немного скачут. А самая мякотка — с двух сторон точки и активная ссылочка посередине. Тут у меня вообще затуп.

[wwt]

Самый простой вариант:

1. JS смотрим ширину страницы и делаем ajax запрос на сервер

2. Сервер в зависимости от ширины отдает пагинатор в нужном виде.

 

Минусы:

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

 

Плюсы:

1. Всегда актуальный пагинатор сгенерированный на стороне сервера.

 

 

ЗЫ или даже с помощью js генерировать убирая вопрос с запросами. Вообще в принципе считаю что формирование пагинатора это не для CSS задача.

[rus]

А не пробовал дизайнеру подкинуть рассмотреть другой вариант? Или мы легких путей не ищем?

Например такой:

ползунок внизу двигается вправо и влево

[Veseloff]

1. Именно такой вид определил человек-дизайнер, так что всякие paginator2000 не прокатят.

2. С js можно, не проблема вообще. Но мне интересно можно ли это сверстать.

2. Сервер в зависимости от ширины отдает пагинатор в нужном виде.

Сервер не знает ничего про ширину экрана  

[wwt]

Сервер не знает ничего про ширину экрана

Ну согласно пункту 1 ширину нужно передавать в запросе =)) Но не суть в общем.