Использование 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 и разработчик может добавлять неограниченное количество кнопок, не заботясь об их идентификаторах!
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Георгий
07.12.2007
Постоянная ссылка (Permalink)
У меня почему то все исходные коды на этой странице без переносов строк - то есть все в куче.
Mike Khasaya
07.12.2007
Постоянная ссылка (Permalink)
Спасибо за сигнал. Проверил в IE 6 действительно глюк, хотя в Opera, Safari, Firefox на PC и на MAC все нормуль...
Nikita
08.12.2007
Постоянная ссылка (Permalink)
Ну шумиха давно уже спала. Ajax уже нормально воспринимается.
Ховеры надо делать с помощью CSS, если конечно ховер без анимации.
Ничё такой фреймворчек, хотя я уже прикипел душой к jQuery. ))
Mike Khasaya
09.12.2007
Постоянная ссылка (Permalink)
Я бы посмотрел как бы Вы сделали ховеры на управляемом сайте, где заранее неизвестно количество разделов и клиент может загружать картинки для ховеров через CMS. Мой метод позволяет делать столько разделов сколько нужно, к тому же поддерживается деградация (если у человека не работает JS). Если же делать делать html сайт с 5-10 разделами-ховерами, то я с Вами согласен, однако тогда надо извращаться для IE 6.
Nikita
11.12.2007
Постоянная ссылка (Permalink)
Не надо извращаться. Всё уже давно написано. Погуглите и найдёте уйму решений для CSS меню с картинками.
Минусы вашего примера:
Если меню управляется из CMS и клиент сам его создаёт (хотя это какая-то глупость, по-моему, он что у вас в paint их делает?), то в этом фантастическом случае можно к CMS написать плагин (PHP + GD) соединяющий обычную картинку с активной.
Mike Khasaya
11.12.2007
Постоянная ссылка (Permalink)
Эта техника используется уже не на одном сайте, суть такова, что клиенту не надо нанимать верстальщиков и программистов, ему дается шаблон в фотошопе и при добавлении нового раздела он меняет надпись в шаблоне и запускает экшн, который выдает две картинки для загрузки на сайт. Вы же переходите к частному случаю. Скоро я напишу статью про метод Pixy в нем будет описана методика создания ховеров без javascript.
Теперь пройдусь по минусам:
1) Javascript отключен у малого числа посетителей и у них также не будет работать Ajax в этом случае, но покажутся просто картинки разделов. В данном случае обеспечивается плавная деградация.
2) Задержка будет и при использовании только CSS, например IE даже при методе Pixy зачем то закачивает картинку заново, другие браузеры так не поступают. Но специально для вас я сделаю прелоадер для моей техники, описанной в данной статье, как только у меня появится свободная минутка.
Nikita
13.12.2007
Постоянная ссылка (Permalink)
Получается клиент должен уметь работать в фотошопе? Я не буду говорить о том, что клиент вообще не должен лезть в редактирование сайта - это уже отдельный разговор.
Суть моего вам предложения ещё лучше. И это не частный случай. Допишите к своей CMS системе объединение двух картинок. Решатся многие проблемы.
1) процент не маленький
2) В IE метод Pixy лечится
Mike Khasaya
13.12.2007
Постоянная ссылка (Permalink)
А смысл обьединения картинок? А вот понадобится вам например к пункту подключить AJAX сценарий или картинки разной высоты, как тогда быть? Переверстывать и перекодировать страницу? Я просто хочу сказать, что есть простые сайты, где больше метода Pixy не надо, есть сложные сайты, куда мой метод подойдет больше...
Nikita
13.12.2007
Постоянная ссылка (Permalink)
Смысл объединения картинок в том, чтобы работал метод "Pixy", как вы его называете. Не понимаю откуда такое название, это просто CSS ховер, который был придуман навным-давно. Видимо, чтобы себя распиарить, какой-то верстальщик решил его обозвать. А причём тут AJAX? Вы не путайте тёплое с мягким - CSS и JS. какие картинки разной высоты? Где вы такое безобразие видели? В общем я вас не понимаю, вы меня тоже. Не хочу больше дискутировать.
Mike Khasaya
13.12.2007
Постоянная ссылка (Permalink)
На одной надпись в 2 строки, на другой в 1 строку, высота будет разной. А если длина картинок с разделами разная, тогда как быть(мы же задаем сдвиг фона по горизонтали в классе)? Ajax можно использовать вкупе с ховерами в данной библиотеке. Pixy - дружеское прозвище создателя метода, о котором вы упомянули - Петра Станичека (Petr Stanicek).
Владимир
06.09.2008
Постоянная ссылка (Permalink)
Пример выбран неудачно, так как его можно сделать только при помощи CSS вообще без javascipt.
cybermerlin
02.04.2009
Постоянная ссылка (Permalink)
а просто применить к <a> css не судьба?
<a id="but_cont" href="bla.html">Mike Khasaya
22.08.2009
Постоянная ссылка (Permalink)
2 cybermerlin:
Еще раз повторяю, данный метод я использовал в CMS, в которой нужно подгружать картинки для рубрик (иногда достаются такие макеты от дизайнера). Заказчик попросил возможность изменения названий разделов... С помощью данной библиотеки вы можете прикрутить любые js действия к ссылкам.