iTEYE

hover любых элементов

14 января 2009

Whatever:

Самые современные браузеры поддерживают : селектор для любого элемента . Это клево, потому что это позволяет Вам применить эффект mouseover к строкам таблицы используя только . IE откровенно лажает с :, в лучшем случае если стоит 7 версия, но в большенстве случаев стоит 6.

Whatever: — маленький скрипт, который автоматически исправляет : :active и :focus для IE6, IE7 и причуд IE8. Версия 3 вводит поддержку ajax, это значит, что любой , который вставлен в документ через javascript, также имеет вызовы : :active и  стили :focus в IE.

Посмотрим как это работает.

Связь whatever: с элементом тела, и Вы все установлены. Отметьте, что URL поведения относительно файла , не к файлу как фоновое изображение, которым был бы URL.

Link whatever: to the body element, and you’re all set. Note that behavior URLs are relative to the file, not to the file like a background image URL would be.

Определение поведения для IE. Как это работает?

Все браузеры могут работать с правилами , используя javascript, и динамически вставлять новые правила. Обычно, IE возвращает «unknown» для чего-нибудь, что он не поддерживает, например; «p:first-child div» изменился бы на «div p:unknown», и «p [href]» будет возвращен как «unknown». К счастью IE распознает : как управляющую конструкцию, и оставляет её в покое.

IE также поддерживает так называемые поведения; есть две встроенные функции поведения, динамическая подгрузка и постоянное хранение данных. Также можно использовать .htc или .hta файл для расширения. Все это связанно с узлами через .

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

Таким образом : :active и :focus сможет поддерживаться, и как разработчик, Вам не надо ничего делать, кроме ассоциации файла сценария. Все остальное на автомате скрипт делает сам.

В отличие от версий 1 и 2, версия 3 также поддерживает динамически добавленный (Аякс). Различие — то, что 1 версия и 2-ая работал при событии onload (тоесть только 1 раз при загрузке), тогда как 3-я версия использует expression, чтобы позволить элементам делать вызов самостоятельно. Читайте прокомментированную версию для получения информации относительно этого.

Для примера меню An:

Обычное использование : создает menusystems, используя списки. Двойной уровень menusystem слишком прост для создания. Например, если Вы удалили бы javascript из suckerfish dropdown, описанный в этой статье  и добавили бы этот скрипт к телу, он бы продолжал работать правильно.

Множественные меню требуют различного подхода. Это происходит из-за того, что IE косячит при работе с детьми элементов:

Есть альтернативный способ моделировать это, используя  только простые порожденные селекторы. Ранее описанный метод был основан на использования дополнительного пространства classnames, но более простой способ состоит в том, чтобы использовать спецификации . У каждого правила есть определенный вес, который может быть определён просто считая различные элементы правила. Nodenames весит «1», класс, псевдо-класс и селекторы атрибута весят «10», и id весят «100». Возьмем например следующее:

Первое правило содержит только 2 элемента, которые весят 2. Второе также содержит 2 элемента, но : — псевдо класс весит 10, таким образом объединенное значение правила 12. Поскольку 12 превышает 2, li покажет нам влеженный ul.

Как же это нам поможет? Итак, если правило весом в 12 показывает всё подменю, все, что мы должны были бы сделать, создать правило, которое весит больше 12, чтобы скрыть следующие меню. Следующее подменю должно весить еще больше и т.д. Для 3 уровней код удивительно короток:

Этот способ может использоваться для неограниченного числа вложений без дополнительных классов.

Оптимизация событий сценария

Есть ще один способ. .htc файл ищет в : правила, и прикрепляет mouseover и mouseout к элементам. После чего : убирается из селектора.

… заменен на:

Это правило будет действовать ко всем <li> элементам в меню, прикрепляя события к элементам, для которых это не обязательно. Легче сделать используя имя класса. Например для подменю использовалось бы:

… это более эффективно, т.к. выбираются только те элементы, которые фактически нуждаются в событиях. Плохо лишь то, что необходимо создавать классы для указания стилей меню и Вам бы пришлось так или иначе с этим возиться.

csshover3.htc — сжатая версия (2.5Kb)

csshover3-source.htc — версия с комментариями (9Kb)

Оригинал статьи: Xs4all.nl

technology, , , ,

Leave a Reply

Скидки до 5% на заказ хостинга!

Сайт работает на быстром VPS/VDS хостинге от FASTVPS