Javacript:Исследование на тему замены стандартных кнопок (ретрансляция)

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

Допустим, что она должна выглядеть примерно так:

Кнопка должна:

  1. быть inline-блоком
  2. иметь возможность наследовать стилизацию родителя (в пределах возможностей)
  3. Наследовать некоторые свойства и методы родителя.

На первом этапе я попробовал максимально минимизировать код, создавая подобную кнопку двумя контейнерами один из которых вложен во второй со смещениями для отображения красивого бэкграунда с закруглениями, в конце концов, этого не достаточно для того что бы в процессе была возможность наследовать свойства и методы самой кнопки, то есть сама кнопка как элемент должна присутствовать внутри контейнеров (<span><div><button/></div></span>).

Для упрощения эксперимента используем jQuery,

Спустя некоторое время выяснилось, что крайне сложно под IE, FF, Opera контролировать размеры и внешний вид всех контейнеров с кнопкой вкупе c помощью обычных CSS. Результат превратился в борьбу хаков над стилями. Тут же я впервые столкнулся с надобностью написания различных стилей для FF2 и FF3.

В конце концов за основу была взята концепция, используемая в ExtJS, а именно – таблица.

[левый край|кнопка|правый край]

В связи с этим, количество вопросов с позиционированием значительно сократилось, и вместе с ним – количество CSS.

Чит-коды

Допустим, что исходные кнопки задается следующим образом
<input type=’submit’ value=’Submit’ class=’replaceMe w100′>
<input type=’button’ value=’Pushme’ class=’replaceMe ico ico-image’ disabled=’disabled’>

В данном случае у нас получается что класс replaceMe будет являтся селектором для замены, класс w100 – вспомогательный класс (допустим, отвечающий за ширину кнопки), который должен будет наследоваться. ico и ico-image – классы отвечающие за иконки.

Картинка-спрайт для прототипа:
image

CSS прототипа:

[/crayon]

И собственно, сам код:

[/crayon]

update: Демонстрация работы, по просьбам трудящихся.

ExtJS 3.0 Beta

По случаю 3-хлетия работы команды ExtJS вышла 3-я (пока что бета) версия фреймворка, на котором я познавал чудеса JavaScript+Ajax+CSS программирования. Анонсировано переработанное "ядро" ExtCore — объектно-ориентированная структура определений и основных функций ExtJS для "повседневной работы". Подразумевается, что в ядре нет ни слова об именитых интерфейсах. Только функционал и клоуны ;)

Качать: ExtJS 3 RC1 или Ext Core


ExtCore

  • Манипулирование DOM
  • Управление CSS
  • Обработка событий
  • Работа с размерами и управление ими
  • Базовый функционал для работы с Ajax и JSON
  • Анимация и спецэффекты

Так же для пущей кросс-браузерной совместимости из предыдущих версий ExtJS позаимствованы утилиты и функционал:

  • Классическая структура вложенных классов
  • Класс Observable
  • Генератор разметки и простейший шаблонизатор (Template. XTemplate, к великому сожалению не включен)
  • Функционал отложенного исполнения кода.
  • Разбор и компиляция URL

Один из самых немаловажных моментов – размер библиотеки: 25Kb!

Development. Ajax.

Поуши увяз в Ajax.

В данный момент, вот уже почти пол года занимаюсь проектом TIS.ru.
Где то с марта месяца разрабатывается обратная сторона “луны” с использованием ExtJS.

В начале года открыл для себя Eclipse PDT.
В локале поднял SVN под Денвером.

Машинка, на которой вращается проект: Сервер HP ML370R05 G5 series
Установил Убунту 7.10, поднял на ней ISPConfig,

С апреля месяца со мной в команде еще один программист. :) Самое удивительное то, что, работая в предыдущей организации я у него принимал собеседование :)

Вот так вот.