Понадобился горизонтальный скроллируемый таймлайн, желательно на bootstrap. Что-то вроде фейсбуковской ленты, но "на боку". Каждый элемент ленты это блок фиксированного размера. Эскиз на картинке: Хочу семантической разметки и чтобы в бутстрапную страничку легло. Свои варианты есть, но не нравятся. Я как-то больше по бек-енду специализируюсь. Заранее спасибо! Тема на русском SO: http://ru.stackoverflow.com/questions/424981/%D0%93%D0%BE%D ... 0%B8%D0%B9
Вот что вырисовывается пока: http://jsfiddle.net/5u6180re/2/ Но я открыт для предложений Например адаптивность хочется, чтобы с некоторого размера таймлайн превращался в вертикальный. За хороший вариант угощу пивом.
Предлагаю упороться и рисовать канвасом. Для таких вещей - самое то. Как бонус, полученный таймлайн можно будет целиком сохранять просто через ПКМ->сохранить картинку.
Мб на выходных в охоточку, ок?) Добавлено спустя 34 секунды: Там на деле все просто, но нужно немножко времени свободного.
Собсно вот, за полчаса, примерно, накиданный простенький прототипчик - http://jsfiddle.net/ukgs4k4e/1/ Функция отрисовки жрет два параметра: массив с данными и идентификатор холста, по которому рисуем. С форматом данных можно ознакомиться там же, это, как понятно, переменная data, и, имхо, он прост как сапог. Вроде все интуитивно понятно, тупо массив объектов, содержащих всего 2 свойства - url пикчи и год. Разумеется, можно их скармливать функции в процессе работы, получая JSON-ом от сервера, например. При этом она должна стереть все, что было нарисовано ранее, перекроить холст в плане размеров с учетом количества объектов, и нарисовать все заново. Формула расчета высоты холста сделана на глаз и не привязана к высоте пикч, но это можно пофиксить, если есть нужда. Просто пикчи, в силу особенностей веба, подгружаются на холст асинхронно, по мере подсоса их браузером. Если нужно знать их размер заранее, нужно переписать все с асинхронной отрисовки на предзагрузку. Это не сложнее и не проще, это мальца иначе, не более того. Сейчас расчет высоты зависит только от толщины желтой линии. Причем довольно кривовато, на глаз Второй параметр, идентификатор холста не обязателен. Если его не отдать (что я нагло делаю, собсно), функция просто прицепится к первому попавшемуся на странице канвасу и будет рисовать в него. Собсна всеу. Добавлено спустя 1 минуту 48 секунд: Да, в расстояние между "вехами" не особо старался попасть как у тебя 1-в-1. Но это тоже фиксится. Главное, сам факт, что на деле там ничего сложного нет
это здорово, ты доказал, что нарисовать можно всё ) но теперь этот канвас надо сделать еще кликабельным. а возможно заказчик попросит hover эффект. в конце концов мы будем эмулировать на JS то, чем обычно занимается сам браузер: рендерингом и обработкой событий.
Да, я знал, что так встанет вопрос. Собсна, никто не мешает "поверх" картинок в те же координаты вбивать абсолютом прозрачные кликабкльные дивы. Будет тебе и клик и ховер и даже фокус через таб. Как минус - пикчи из ленты не будут индексироваться поисковиком картинок. Если же это не нужно, то тогда это плюс, меньше хотлинков будет. Ну и в JSON нужно добавить к объектам третье свойство, ссылку. При этом логику отрисовки вообще менять не придется. Просто вкинуть пару строк кода дополнительных, не более. Имхо, фигачить графику канвасом, а кликабельность дивами - это не бОльший костыль, чем фигачить дивами, юлами и CSS-ами и то и другое. Либо только таймлайн рисовать канвасом, а сами пикчи генерировать честными дивами с бекграундом, или img-ами. [частичный_оффтопик] Пишу сейчас 2д-движочек канвасовый, заточенный под спрайтовую анимацию, в проектовом todo как раз есть технология обработки взаимодействия мыши с нарисованными компонентами, не подразумевающая изъебы с перебором всех моделей и сверку "попал курсор по координатам в бокс или нет" [/частичный_оффтопик]
В моем нескромном понимании растекаться на множество технологий нужно только тогда, когда без этого нельзя обойтись. Иначе стоимость содержания вырастает до небес. Просто по приколу я кодил пока мне не надо было семью содержать. Так что это любопытно и не более того. Спасибо, что уделил внимание и хотел помочь! Ты красавчик ) Добавлено спустя 56 секунд: Ёпта, 5000 сообщений, ты догнал меня, суслик! Уделал меня на три года.
Ну, мое дело вкинуть мысль, не более, это понятно. Но, имхо, за такими вещами будущее. Раньше было строгое разделение на флеш и хтмл, а сейчас оно стерто. Не нужно никаких плагинов, никаких расширений, поддерживается оно даже на мобилах. Вангую, что, постепенно, произойдет полное отделение графики от разметки. Нет, я не про цвет дивов или теги img. Я про всякие узорчики и нестандартные дизайнерские решения, которые сейчас либо пытаются пилить на разноцветных дивах с разными углами поворота и скосами краев, либо, кто отчаялся, тупо заменяют пикчами. Это, в том числе, поощряется парадигмой семантической верстки. Да, я в курсе про "а как же JS, отключенный у клиента?". Как по мне - это проблемы клиента. Самостоятельно кастрирует себе браузер - пусть мирится с тем, что у него странички будут чуть менее красивыми. Сам в шоке.
Офтопик так офтопик: Только фанатик может себе позволить себе игнорировать JS. НО! Есть такая штука как graceful degradation и когда она есть это реально высокий класс! Не должно быть лишних непроходимых зависимостей, ящитаю. Можно пережить отсутствие возможности "лайкнуть", но когда браузер не договорился с антивирусом, убил JS и не дает мне пройти human test и зарегаться — это уже беда. Это потери.
Graceful degradation разруливается через noscript. Когда речь идет не о таких мелочах, как красотулечки, а о чем-то, влияющем на работоспособность, тут всегда можно найти решение. Ну и если посмотреть на текущие тенденции, все больеш сайтов обмазываются всякими аяксами и туго на них завязаны. Если у тебя говнобраузер, они просто говорят, мол, бро, обновись. Если у тебя нет JS, они тебе прямо об этом сообщают, чтобы ты не гадал "почему же не работает кнопочка?". В том числе сообщают о причинах его отключения, и о том, как его включить обратно.
Теме UP! Задача, как водится, усложняется прихотями клиента: теперь представьте, что при наведении курсора куда-то в район года, клиент хочет видеть еще ссылки на месяца. Дополнительная детализация тоже с черточками и надписями. В нормальном не-hover состоянии это был бы лишний шум. Но на hover это вроде нормально должно быть. Выручайте! Изначальный макет здесь: http://jsfiddle.net/5u6180re/2/
А заказчик только на словах это представил, или у него есть вариант нарисованный, как он вообще этот кабздец видит? Может просто кликнуть в год и перерисовать шкалу заново, но по месяцам? И кнопки по краям "след. год", "пред. год".
Ну тогда ты попал. У тебя клиент из разряда "ты же профессионал, тебе лучше знать, чего я хочу, но если то, что ты сделаешь, не совпадет с тем, чего я хочу, я буду недоволен, пусть я сам не знаю, чего я хочу".
Без лишнего клика, но полноценные? Есть. Идея о том, что на мобилах работа с этой радостью будет адовым адом. hover вообще не желательно использовать ни для чего, кроме оформления. Либо дублировать его функциональность кликом. А по делу - размер холста менять можно? Он мог бы разъезжаться. Половина холста сползает вниз, а там лента по месяцу. Наводишь на день, половина холста снова сползает, уже поверх половины "годового" холста, красивенько, выдвигается лента с днем. Но на ховерах вложенность более 1 ленты не построить.
высота контейнера фиксированная. над "уползанием" надо подумать - может быть. это рабоая идея! собственно вместо уползания может быть любой эффект замены этого фрагмента на его детализацию. ховер на тачскрине реально нехорош, но думаю на эктив/фокусед продублировать можно. по возможности я хочу всю движуху на чистом CSS без скриптов. кто сделает красиво сегодня - получит 500руб. p.s. выше я намекал на адаптивность — это забыть. горизонтальный скролл как-раз тем и хорош, что он сразу готов к разным разрешениям.
Без скриптов не получится на CSS-е заанимировать. Переключение классов ты не реализуешь без JS, а оно необходимо тут. Это не просто выпадающая менюшка. И да, я пас, своей работы полно... Хотя чисто из академического интереса взялся бы, будь возможность.
Это же надо так обо… ошибаться! Даже в эпоху, совместимости с IE6, на CSS можно было очень многое Нельзя только по аяксу с сервера что-то дернуть. А с заранее загруженным контентом ну почти всё можно без JS. Вот тебе просто по приколу нечто "графическое" и "анимированное". На самом деле ни графики, ни скриптов. http://www.cssplay.co.uk/menu/drawing.html