Поменять CSS эленемента при наведении на него мыши jQuery+Rails

[agileorange]

Наконец-то мы решились использовать jQuery в своих приложениях. Создание сайта дело кропотливое, а создание современного сайта немыслимо без использования какой-нибудь JavaScript библиотеки.

Приведем самый простой пример использования jQuery в Rails приложениях.

Постановка задачи: необходимо поменять CSS эленемента при наведении на него мыши. Есть таблица из двух строк и трех столбцов, необходимо поменять картинку фона при наведении мыши на TD.


<%= link_to "О нас", ('/') %>

<%= link_to "Услуги", ('/services') %>

<%= link_to "Проекты", ('/projects') %>

<%= link_to "Новости", ('/news') %>

<%= link_to "Контакты", ('/contacts') %>

<%= link_to "Блог", ('/posts') %>

Чтобы использовать jQuery библиотеку в Rails приложении сначала надо указать на нее в теге HEAD:

<%= javascript_include_tag 'jquery-1.3.2', 'application' %>

Application.js содержит все JavaScript функции и классы, определенные для приложения. Тут мы и опишем необходимую функцию.

$(function(){
    $("td.off").mouseover(function(){
        $(this).removeClass().addClass("over");
    }).mouseout(function(){
        $(this).removeClass().addClass("off");
    });
})

Теперь осталось только указать в CSS какую картинку использовать в каком случае:

.over {
    background-image: url('over.jpg');
}

.off {
    background-image: url('off.jpg');
}

Команда Agile Orange - создание сайтов создание интернет магазина продвижение сайтов