Вероятно, многие из вас используя css-expressions сталкивались с проблемой периодического появления сообщения abort. В народе поговаривают, что связано это с изменением DOM-дерева до его готовности.
Я тоже сталкивался и, не долго думая, решил написать небольшую «обертку» для expression’ов, которые я часто использую, учитывающую готовность DOM, упакованную в файл стилей.
Оную вашему вниманию и представляю.
«Библиотека» представляет собой всего один файл CSS, но с включенным в него кодом JavaScript, который мы и вызываем в expression’ах:
«Действия» вызываются по готовности DOM-дерева. Если expression запущен после готовности — сразу.
Включенные функции (действия)
Добавляет элемент span с классом x-expression-pseudo-before первым дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».
Добавляет элемент span с классом x-expression-pseudo-after последним дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».
Добавляет класс x-expression-first-child к элементу, если он является первым дочерним своего родителя. Псевоэлементы before и after, сгенерированные библиотекой, пропускаются.
Эмулирует св-во border-spacing через атрибут cellSpacing.
Параметр options — число, устанавливаемое в атрибут.
Проверяется наличие у элемента атрибута с именем name, и, если задан параметр value, его значение.
Если проверка пройдена, устанавливаются классы x-expression-attribute, x-expression-attribute-name и x-expression-attribute-name-value.
Управляет минимальной и максимальной шириной элемента. Данные берутся из св-в min-width и max-width. Для расчета используется родительский элемент.
Запускает произвольную функцию в контексте элемента.
Параметр options — запускаемая функция.
Если кому пригодится, скачать можно тут
Я тоже сталкивался и, не долго думая, решил написать небольшую «обертку» для expression’ов, которые я часто использую, учитывающую готовность DOM, упакованную в файл стилей.
Оную вашему вниманию и представляю.
Использование
«Библиотека» представляет собой всего один файл CSS, но с включенным в него кодом JavaScript, который мы и вызываем в expression’ах:
- /*@cc_on /*@if (1) @else @*/
- Стилевые правила.
- /*@end @*/
- <!-- /*
- Код JS
- <!-- */
Подключение
- <!--[if lt IE 8]>
- <script type="text/javascript" src="ie.min.css"></script>
- <link rel="stylesheet" type="text/css" href="ie.min.css" />
- <![endif]-->
Использование
- селектор {
- width:expression(expressions('эмулируемое действие', this, {
- property: 'св-во для отмены (обычно идентично тому, в котором вызывается expression). Если указано, св-во обнуляется и expression в нем повторно не выполняется.',
- options: 'опции, в зависимости от действия'
- }));
- }
«Действия» вызываются по готовности DOM-дерева. Если expression запущен после готовности — сразу.
Включенные функции (действия)
before
Добавляет элемент span с классом x-expression-pseudo-before первым дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».
after
Добавляет элемент span с классом x-expression-pseudo-after последним дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».
firstСhild
Добавляет класс x-expression-first-child к элементу, если он является первым дочерним своего родителя. Псевоэлементы before и after, сгенерированные библиотекой, пропускаются.
borderSpacing
Эмулирует св-во border-spacing через атрибут cellSpacing.
Параметр options — число, устанавливаемое в атрибут.
attribute
- {
- name: 'имя атрибута',
- value: 'значение атрибута'
- }
Проверяется наличие у элемента атрибута с именем name, и, если задан параметр value, его значение.
Если проверка пройдена, устанавливаются классы x-expression-attribute, x-expression-attribute-name и x-expression-attribute-name-value.
width
Управляет минимальной и максимальной шириной элемента. Данные берутся из св-в min-width и max-width. Для расчета используется родительский элемент.
any
Запускает произвольную функцию в контексте элемента.
Параметр options — запускаемая функция.
Несколько примеров
- body {
- width:expression(expressions('before', this, {property: 'width', options: 'aaa'}));
- height:expression(expressions('before', this, {property: 'height', options: 'bbb'})); // Не сработает
- top:expression(expressions('after', this, {property: 'top', options: 'ccc'}));
- }
-
- .a1, .a2 {
- width:expression(expressions('firstChild', this, {property: 'width'}));
- }
-
- table {
- width:expression(expressions('borderSpacing', this, {property: 'width', options:'10'}));
- }
-
- input {
- height:expression(expressions('any', this, {property: 'height', options:function(){this.runtimeStyle.backgroundColor = 'red';}}));
- width:expression(expressions('attribute', this, {property: 'width', options: {name: 'type', value: 'text'}}));
- }
-
- .min-max {
- min-width:400px;
- max-width:700px;
- border:10px solid red;
- top:expression(expressions('width', this));
- padding:10px;
- margin:10px;
- }
P.S.
Если кому пригодится, скачать можно тут