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

[klierik]

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

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

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

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

Ширина - фикс

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

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

На заметку:

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

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

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

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

[Great Rash]

Есть мнение, что 400 строк без пагинации тоже не сильно юзабельно, ибо палец устанет колесо крутить.

[Justnewone]

Есть мнение, что 400 строк без пагинации тоже не сильно юзабельно, ибо палец устанет колесо крутить.

Ваще такая мегатаблица, интуитивно, это проигрыш, идеологический. Либо надо отдавать ваще в PDF, либо как-то секторно разбивать и аяксом гнать последователные логичные ответы на структурированные запросы. Ну что можно будет сравнить и найти? мне не очень ясно, визуально нифига кажись не выйдет, много индикаторов в окне полюбому не получится вывести. Странно все.

[s0rr0w]

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

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

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

[rash]

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

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

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

Вообще, послушав такие доводы, прихожу к выводу, что домашняя страничка Васи Пупкина сделана весьма неплохо…

Есть мнение, что 400 строк без пагинации тоже не сильно юзабельно, ибо палец устанет колесо крутить.

Это ошибочное мнение. Можно открыть дискуссию в отдельной ветке, если это так необходимо.

[Great Rash]

В общем если у вас будет время и желание сделать такую таблицу, то я бы на это посмотрел. А ну как и правда удобно будет.

[psywalker]

Мужики, сделайте, прошу вас, я так хочу на это взглянуть

[rus]

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

[mishka]

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

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

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

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

Самая большая страничка по объму кода html, в моей практике, была более 3х тысяч строк, тегов конечно больше(как посчитать незнаю). Плюс филтры для пнг, максимальной-минимальной ширины, и JS Jquery тоже немало так как страничка с попапами, кастом скроллами и еще разной функциональностью... - абсолютно никаких тормозов в ие!

Также както делал линейку длинной 1км ну моник всеравно не совсем точно показывает...

Вобщем джсом генерил елементы с бордером(метки) и цыфирками, высотой в 1см. Итог - FF через несколько секунд(чтото около 5 - 10) построил, ие завис.

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

Edited December 30, 2009 by mishka2

[mishka]

Можна узнать где это "попалось на глаза"? Может проще фаербагом посмотреть и непридумывать велосипед?

С верстеой проблем невижу, а вот джс, мне так кажется так как я в нем не силен, непростой....

[hf3]

ИЕ не умрет. Я гарантирую это)

[klierik]

По поводу ИЕ:

Не буду нискем спорить так как видел это на своих глазах в одном из крупных кроектов которые разрабатывал - ИЕ умирает (имеется ввиду очень большие тормаза). Говоря ИЕ имеется ввиду версии 6 и 7 (хотя 6рка конечно же работает быстрее по сравнению с семеркой).

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

идея s0rr0w по созданию этого блока совпадает с моей в большей мере.

Таблица из 2х колонок и N-го колва строк.

Каждый раздел это отдельный <TR>. Напротив соответствующий <TD> в котором DIV relativ, внутри которого цветные блоки размещаются абсолютно.

Высота и ширина цветных блоков задается частями (1 часть это определенное заданое растояние в пикселах). Таким образом зная длину и ширину части и зная кол-во часте мы можем задать размеры блока.

Позиционируются же блоки относительно DIV-родителя который, собственно, скрипт двигает влево/вправо (не забываем что период всегда указан и он не бесконечен. в среднем его длина будет 30-50 дней.)

Для чего отдельные TR думаю и так понятно.

В конечном итоге имеем всевдотаблицу, которая создана просто гифом. и что бы реализовать позиционирование требуется 1(2) дива + див-цветной блок. Решение крайне простое.

минимум кода которые отвечает поставеной задаче.

[rash]

Самая большая страничка по объму кода html, в моей практике, была более 3х тысяч строк, тегов конечно больше(как посчитать незнаю). Плюс филтры для пнг, максимальной-минимальной ширины, и JS Jquery тоже немало так как страничка с попапами, кастом скроллами и еще разной функциональностью... - абсолютно никаких тормозов в ие!

А посмотреть есть где? Хочется посчитать-померять -)

[rash]

По поводу ИЕ:

Не буду нискем спорить так как видел это на своих глазах в одном из крупных кроектов которые разрабатывал - ИЕ умирает (имеется ввиду очень большие тормаза). Говоря ИЕ имеется ввиду версии 6 и 7 (хотя 6рка конечно же работает быстрее по сравнению с семеркой).

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

В виденном мной примере с 49700 элементами на странице большую часть составляла таблица. Скролл в IE если и тормозил, то неощутимо. JS - да, но это сильно больше чем 8000—16000 элементов.

Так что можно с этим справиться, просто поверьте в себя -)

[mishka]

Левая часть это блоки со списками. В блоке тайтл после него список, который при клике на тайтл слайдится(закрывается открывается). Справа блок с шириной и overflov:hidden; position:relative; В нем еще блок который минусовым маргином будет кататся туды-сюды и ему в ксс задать огромную ширину, а потом джсом прописывать ширину по самому широкому дочернему елементу, а в нем таблицы. Таблица не одна, так как она тоже свертывается при свертывании соответствующего блока. Для вообще супер юзабилити - все размеры в ем(и минусовые маргины тоже), тогда и при увеличении шрифта все ок будет.

Ие врядли будет виснуть. Так как эти таблички все будут строится на сервере, а не у юзера.

Edited December 30, 2009 by mishka2

[s0rr0w]

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

Количество тегов могу померять.

Желательно поменьше хитрого кода, и все будет ок.

JS в ИЕ очень тормозной.

[mishka]

С емами я немного погарячился. Так как правая часть будет таблица то в пикселях все ок будет.

[s0rr0w]

Для этой задачи не нужна таблица вообще.

[mishka]

ну я другого мнения.

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

Меньше абсолютов/релейтивов - стабильнее работа

А стаблицей - просто ячейки закрасить.

Edited December 30, 2009 by mishka2

[klierik]

Для того что бы позиционировать DIV, хватит всего то X и Y значения + ширина и высота

Для того что бы закрасить ячейку/ячейки, нужно знать кол-во ячеек отступа сверху/слева + длина.

каждой ячейке прописать фон.

А если нужно двигать выделенную область, то как тут? Всё, глына ))

Таблицы не выход по причине того что динамика здесь под вопросом!

Да и в любом случае кол-во тегов влияет на скорость работы браузера (для тех кто не согласен, не забывайте про глубину длиной в N).

Решение создано на базе списков и дивов.

Слева список, справа область и в ней дивы. Все работает как часы, очень быстро и гибко (исключение ИЕ6, тут свой хак на JQ писался)

По поводу relative|absolute - классическое мнение разработчика, который, в ущерб себе, не использует эти свойства )

имхо!