Использование CSS селекторов для создания Javascript behaviours

Сейчас в различных Интернет источниках подняли шумиху вокруг Ajax. Данная технология позволяет оживить веб страницы и добавить в ваши приложения интерактивность используя Drag&Drop, анимированное появление обьектов и динамическую подгрузку контента без перезагрузки страницы. В данной статье я открою для вас маленькую библиотеку Бена Нолана - Behaviours и на примере покажу как сделать hovers для кнопок используя CSS селекторы.

Так делать не надо!

Приведу отрывки кода с пары известных ресурсов использующих технологию Ajax.

Flickr:

<div id="image_16209134_normal"> <script language="Javascript"> photo_hash['16209134'] = new Object(); photo_hash['16209134'].title = '2am on Saturday'; </script> <h4 id="title_div16209134" style="margin-bottom: 0px; margin-top: 0px;"> 2am on Saturday </h4> <script type="text/javascript">initPhotosUserPageTitle_div('16209134');</script>

Backpack:

<span onmouseover="notesBlock.hoverBegin(128699)" onmouseout="notesBlock.hoverEnd(128699, true)"> <a class="trashcan" href="#" onclick="if (confirm('Are you sure?')) { new Ajax.Updater('notes', '/page/2326/notes/destroy/128699', {

Если использовать такой подход, то со временем ваши проекты станут монстрообразными и любое изменение кода может нарушить работу сайта. Воспользуемся более изящным методом, который придумал Бен Нолан в 2005 году - его библиотекой Behaviours.

Библиотека Behaviour

Обычно behaviour'ы добавляются так:

<li> <a onclick="this.parentNode.removeChild(this)" href="#"> Click me to delete me </a> </li>

Используя библиотеку Бена мы отделим javascript от html кода:

<ul id="example"> <li> <a href="/someurl">Click me to delete me</a> </li> </ul>

А теперь используя css селекторы добавим к тегу <a> javascript функционал:

var myrules = { '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this); } } }; Behaviour.register(myrules);

Если вы модифицируете DOM дерево, то для подключения правил к новым элементам, просто поместите в свой скрипт вызов Behaviour.apply().

Скачать библиотеку Behaviour.js version 1.1

Ну и напоследок приведу пример создания ховеров для кнопок

Hovers для кнопок

Создадим файл hovers.html и добавим туда код:

<div id="hovermenu"> <a href="#"><img src="i/company.jpg" alt="Company" border="0" /></a> <a href="#"><img src="i/development.jpg" alt="Development" border="0" /></a> <a href="#"><img src="i/contacts.jpg" alt="Contacts" border="0" /></a> </div>

В файл library.js добавьте следующий код:

/* Smart behaviours by webdev.ru */ /* Я всегда использую вместо getElementById() функцию $(), если вы пользуетесь библиотекой prototype.js, то можете удалить ее. */ function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } /* Функция принимает название тега и возвращает id обьекта (обьектов) */ function $tags(obj, e){ var first=arguments[2]; try { element=obj.getElementsByTagName(e); } catch(err) { element=obj.children.tags(e); } return (first ? element : element[0]); } /* Функция добавляет префикс перед расширением файла. В нашем случае мы добавим _over для наведенной кнопки */ function parse_url(url, prefix){ var rgxp=new RegExp("(http\://.+/)([^/]*)\\.([\\w]*)$","i"); purl=rgxp.exec(url); return purl[1]+purl[2]+prefix+'.'+purl[3]; } /* Теперь назначим javascript для селекторов */ var my_rules = { '#hovermenu a' : function(e){ e.onmouseover = function(){ element=$tags(this, 'img'); element.src=parse_url(element.src, '_over'); } e.onmouseout = function(){ element=$tags(this, 'img'); element.src=parse_url(element.src.replace('_over',''), ''); } } }; /* Применим правила */ Behaviour.register(my_rules);

Смотреть пример

Прелесть моего решения состоит в том что оно работает во всех браузерах включая IE 6 и разработчик может добавлять неограниченное количество кнопок, не заботясь об их идентификаторах!

Поделись с друзьями:
Комментарии

У меня почему то все исходные коды на этой странице без переносов строк - то есть все в куче.

Спасибо за сигнал. Проверил в IE 6 действительно глюк, хотя в Opera, Safari, Firefox на PC и на MAC все нормуль...

Ну шумиха давно уже спала. Ajax уже нормально воспринимается.
Ховеры надо делать с помощью CSS, если конечно ховер без анимации.

Ничё такой фреймворчек, хотя я уже прикипел душой к jQuery. ))

Я бы посмотрел как бы Вы сделали ховеры на управляемом сайте, где заранее неизвестно количество разделов и клиент может загружать картинки для ховеров через CMS. Мой метод позволяет делать столько разделов сколько нужно, к тому же поддерживается деградация (если у человека не работает JS). Если же делать делать html сайт с 5-10 разделами-ховерами, то я с Вами согласен, однако тогда надо извращаться для IE 6.

Не надо извращаться. Всё уже давно написано. Погуглите и найдёте уйму решений для CSS меню с картинками.

Минусы вашего примера:

  • при отключенном javascript ховер не работает;
  • задержка при наведении на кнопку

Если меню управляется из CMS и клиент сам его создаёт (хотя это какая-то глупость, по-моему, он что у вас в paint их делает?), то в этом фантастическом случае можно к CMS написать плагин (PHP + GD) соединяющий обычную картинку с активной.

Эта техника используется уже не на одном сайте, суть такова, что клиенту не надо нанимать верстальщиков и программистов, ему дается шаблон в фотошопе и при добавлении нового раздела он меняет надпись в шаблоне и запускает экшн, который выдает две картинки для загрузки на сайт. Вы же переходите к частному случаю. Скоро я напишу статью про метод Pixy в нем будет описана методика создания ховеров без javascript.

Теперь пройдусь по минусам:
1) Javascript отключен у малого числа посетителей и у них также не будет работать Ajax в этом случае, но покажутся просто картинки разделов. В данном случае обеспечивается плавная деградация.

2) Задержка будет и при использовании только CSS, например IE даже при методе Pixy зачем то закачивает картинку заново, другие браузеры так не поступают. Но специально для вас я сделаю прелоадер для моей техники, описанной в данной статье, как только у меня появится свободная минутка.

Получается клиент должен уметь работать в фотошопе? Я не буду говорить о том, что клиент вообще не должен лезть в редактирование сайта - это уже отдельный разговор.

Суть моего вам предложения ещё лучше. И это не частный случай. Допишите к своей CMS системе объединение двух картинок. Решатся многие проблемы.

1) процент не маленький
2) В IE метод Pixy лечится

А смысл обьединения картинок? А вот понадобится вам например к пункту подключить AJAX сценарий или картинки разной высоты, как тогда быть? Переверстывать и перекодировать страницу? Я просто хочу сказать, что есть простые сайты, где больше метода Pixy не надо, есть сложные сайты, куда мой метод подойдет больше...

Смысл объединения картинок в том, чтобы работал метод "Pixy", как вы его называете. Не понимаю откуда такое название, это просто CSS ховер, который был придуман навным-давно. Видимо, чтобы себя распиарить, какой-то верстальщик решил его обозвать. А причём тут AJAX? Вы не путайте тёплое с мягким - CSS и JS. какие картинки разной высоты? Где вы такое безобразие видели? В общем я вас не понимаю, вы меня тоже. Не хочу больше дискутировать.

На одной надпись в 2 строки, на другой в 1 строку, высота будет разной. А если длина картинок с разделами разная, тогда как быть(мы же задаем сдвиг фона по горизонтали в классе)? Ajax можно использовать вкупе с ховерами в данной библиотеке. Pixy - дружеское прозвище создателя метода, о котором вы упомянули - Петра Станичека (Petr Stanicek).

Аватар пользователя Владимир

Пример выбран неудачно, так как его можно сделать только при помощи CSS вообще без javascipt.

а просто применить к <a> css не судьба?
<a id="but_cont" href="bla.html">

<style type="text/css">
#but_cont{
  background-image:url(kartinko.gif);
}
#but_cont:hover{
  background-image:url(kartinko_act.gif);
}
</style>

2 cybermerlin:
Еще раз повторяю, данный метод я использовал в CMS, в которой нужно подгружать картинки для рубрик (иногда достаются такие макеты от дизайнера). Заказчик попросил возможность изменения названий разделов... С помощью данной библиотеки вы можете прикрутить любые js действия к ссылкам.