Home > Программирование > Каскадные таблицы стилей

Каскадные таблицы стилей

February 13th, 2009 Ruben

[lang_ru]Открытие сабклассинга в каскадных таблицах стилей просто перевернуло моё мировозрение! Оказывается, раньше я видел всё шиворот-навыворот, плоско и убого. Сказывалось неумение пользоваться великим и могучим собранием мудрости – интернетом.

На таких радостях я решил срочно скопировать элемент упралвения типа “календарь” из одноимённого приложения “iCal” для размещения на сайте. Для пародирования оригинала я использовал только CSS и Javascript.

Оригинальный GUI элемент

Оригинальный GUI элемент

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

Сам календарь по идее должен был войти в общую GUI панель, которая должна показать “товар лицом” в приложении. Общая структура размещения элементов управления должна быть таковой:

Общая схема подделки

Общая схема подделки

И вот, что у меня получилось после двух дней размышлений, кодирования и исправления ошибок:

Подделка

Подделка

В элементе управления нет ни единого фонового рисунка. Всё делает “-webkit-…”. Безусловно немного другой шрифт и жирность, но использование Verdana продиктовано исключительно реалиями использования элемента в гипертексте.

Та же участь постигла элемент управления MonthView ((Я не знаю, как на самом деле этот элемент (или по терминологии Cocoa – [Custom, User, My] View) управления называется, но по факту своего назначения, такой псевдоним ему подходит как нельзя лучше. Внешне он очень напоминает таблицу, но на самом деле это в чистом виде DIV-ы в DIV-ах с координатным размещением. Зачем? Для того, чтобы аккуратно разместить в нём всякие разные элементы, отвечающие за процессы. Сложность последних в том, что некоторые из них начинаются одной датой, а заканчиваются другой. Иные просто протекают через месяц без начала и конца)), который в гипертекстовой разметке выглядит очень чистым и аккуратным:

Месяц

Месяц

А вот, задуманная структура этого элемента управления:

Задачи на месяц

Задачи на месяц

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

[/lang_ru][lang_en][/lang_en]

Comments are closed.