Интересная задачка

[klierik]

Приветствую.

На днях попалось на глаза такое:

Описание: Календарик. Колонок календаря всегда 20. может прокручиваться (не до бесконечности). Есть события которые длятся несколько дней (см. рисунок)

Исходный данные:

Ширина - фикс

Высота/ширина колонок - фикс

Слева сайдбар - строк может быть даже 200.

На заметку:

Мышкой можно выделять область (как в Екселе ячейки) (см. рисунок)

Интересна реализация верстки.

Какие будут идеи?

PS: макет сам наклепал на скорую руку.

[psywalker]

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

[klierik]

колонки - 40 штук

строки - 200 штук

итого 8 000 тегов - ИЕ умрет

а если строк будет 400

[psywalker]

колонки - 40 штук

строки - 200 штук

итого 8 000 тегов - ИЕ умрет

а если строк будет 400

Ну тогда я подозреваю, что тут без JS не обойтись)

[klierik]

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

[Игорь Ермаков]

Есть одна безумная идея, если до 3-х ночи все свои интегралы доделаю, попробую наверстать. Иначе завтра.

[klierik]

а в двух словах сказать никак

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

имхо =)

[Игорь Ермаков]

Ну идея в том, чтобы сверстать всё параграфами или списками, а эффект таблицы сымитировать. т.е мы имеем нормальный текст, а поверх лежит блок, который имитирует таблицу, при помощи тиражируемого, прозрачного фона. Вот так вот. Только над тем как выделять надо подумать.

[klierik]

то есть будет такоеже кол-во елементов как и при таблице?

[Игорь Ермаков]

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

[klierik]

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

числа только вверху.

так же нужно учитывать что слева данные могут схлопыватся.

[voooodoo]

итого 8 000 тегов - ИЕ умрет

а если строк будет 400

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

[psywalker]

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

числа только вверху.

так же нужно учитывать что слева данные могут схлопыватся.

Лёх, одно могу сказать: Когда сделаешь, покажи обязательно, очень интересно поглядеть

[klierik]

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

да умрет. тестили ИЕ6-7 года 2 назад... после 10 000 работает ужасно медленно на крутом офисном тазике.

по этому поводу даже чтото было на хабре когдато )

Лёх, одно могу сказать: Когда сделаешь, покажи обязательно, очень интересно поглядеть

готовое решение не столь сладкое как его реализация, сам знаешь

[psywalker]

готовое решение не столь сладкое как его реализация, сам знаешь

Ну да блиин, ты прав. Но щас времени вообще нету нихрена к сожалению, НГ на носу ещё.

А вопросы:

1. А у тебя там курсором выделен квадратик, он означает: 21 и 22 числа такие то города бла-бла-бла?

2. А остальные разноцветные что означают?

3. Что считается одной ячейкой таблицы? Какой квадратик?

[klierik]

выдиление курсором точ в точ как в Екселе выделяется.

1 ячейка - это один прямоугольник. там они видны.

каждый пункт слева напротив каждого числа - это одна ячейка.

выделятся может только по ячейкам.

разные цвета - ну ето как разные цвета в гуглкалендарь (только там нельзя растянуть сразу не несколько дней, а тут должно)

[s0rr0w]

Без JS точно не обойтись.

Я бы грид нарисовал фоном

Текстики отпозиционировал абсолютно

выделение сделал бы хитрым скриптом, прямо по фону

[klierik]

Текстики отпозиционировал абсолютно

имеется ввиду список слева?

а как тогда напротив них позиционировать справа блоки? при чем строки слева сворачиваются.

а высота всего этого дела резиновая и неизвестно сколько будет строк (автоматом появляться будет скролл)

[s0rr0w]

имеется ввиду список слева?

а как тогда напротив них позиционировать справа блоки? при чем строки слева сворачиваются.

а высота всего этого дела резиновая и неизвестно сколько будет строк (автоматом появляться будет скролл)

Давай еще более детально.

Итак, что у нас есть:

* Стрелки сверху. Тут все понятно.

* Даты. Можно инлайн-блоки фиксированной ширины сделать.

* Контент

Вот на последнем пункте остановимся поподробнее.

Контент ложим в отдельный контейнер. Этому контейнеру присваиваем фон в виде вертикальных полосок. Тайлим по вертикали.

Далее, коллапсируемые блоки укладываем сендвичем в наш контейнер.

Заголовок делаем коротеньким, а вот блок с городами будет див на всю ширину с нижним бордером.

Эт мы отчертим линии.

Далее, цветные боксики - позишин абсолют.

Рисование этих боксиков - по формулам. Сетка имеет стандартную ширину и высоту. Думаю, справишься с детской математикой на уровне 6-го класса.

[Great Rash]

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

[rash]

да умрет. тестили ИЕ6-7 года 2 назад... после 10 000 работает ужасно медленно на крутом офисном тазике.

по этому поводу даже чтото было на хабре когдато )

Сильно зависит от верстки. Было и 10000 — чуть подтормаживало, но даже не мешало работать.

Может попробую посмотреть эту задачу, не знаю только, когда -) Но интересно.

Кстати, нашел пример на 49700 элементов на странице — вот там уже в динамике дикие тормоза, но IE не умирает.

Я бы грид нарисовал фоном

Возможны проблемы при масштабировании текста, хотя первая мысль действительно приходит именно такая.

[Great Rash]

Фоном делать порожняк полный! Постраничная навигация лучший выход!

Смотрите как это реализуют другие:

http://demos.devexpress.com/ASPxGridViewDe.../Scrolling.aspx

[rash]

Фоном делать порожняк полный! Постраничная навигация лучший выход!

Смотрите как это реализуют другие:

http://demos.devexpress.com/ASPxGridViewDe.../Scrolling.aspx

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

[Great Rash]

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

Да и можно ввести поиски нужной записи (фильтр), чтобы не листать страницы, можно рулить количеством отображаемых записей. В общем не так уж это неудобно.

[Justnewone]

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

Да и можно ввести поиски нужной записи (фильтр), чтобы не листать страницы, можно рулить количеством отображаемых записей. В общем не так уж это неудобно.

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

[rash]

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

Можно постараться сделать без тормозов и пагинации. Только придется потрудиться, но вызов принят :-) Как только дойдут руки…