Сейчас в различных Интернет источниках подняли шумиху вокруг 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 webmagazine.biz */
/* Я всегда использую вместо 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 и разработчик может добавлять неограниченное количество кнопок, не заботясь об их идентификаторах!