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: Демонстрация работы, по просьбам трудящихся.

0 ответы

Ответить

Хотите присоединиться к дискуссии?
Приглашаем поучаствовать!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *