VPF::hover элементов формы на javascript - Форум программистов

GZep

Дата 3.11.2006, 15:08 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32

Приветствую Вас!

Вот, значит, какая проблема:

Есть движок, у которого все элементы формы при наведении должны менять класс(css), а при убирании курсора, соответственно наоборот.

Вот, значит, как у меня сейчас сделано:

Код


<html>
<head>
<style type="text/css">
<!--
//Для субмита, ресета и простой кнопки
.input_button {
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 0px;
    border: 0px;
    height: 20px;
}
.input_button:hover {
    background: #606060;
    color: #FFFFFF;
}

//Для всех остальных элементов
.input_field {
    border: 1px solid #FFFFFF;
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
}
.input_field:hover {
    background: #606060;
    color: #FFFFFF;
}
// -->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -->
</script>
</head>

Только вот проблема, в ИЕ такая фишка не проходит... smile

Придумал решение: Написать яваскрипт ф-цию, которая циклом прохожилась по всем элементам форм и ставит им на onrollover соответствующий класс и обратно, на onrollout. Пробовал сам написать, только не работает. Помогите, пожалуйста!

--------------------

Nicholas_S

Дата 3.11.2006, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

GZep, если с использованием JS, то так:

Код


<input type="checkbox" class="class1" onMouseOver="this.className = 'class2'" onMouseOut="this.className = 'class1'">

--------------------

...все в мире относительно

GZep

Дата 3.11.2006, 15:47 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32

А можно написать функцию, которая проходилась бы циклом по элементам и задавала им onMouseOver и onMouseOver?

--------------------

SelenIT

Дата 3.11.2006, 16:03 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

GZep, не надо ничего обходить циклом - ловите событие (при его всплытии) на уровне самой формы, и анализируйте объект-источник. В простейшем случае (как в данном примере, когда стили у кнопок и полей при наведении меняются одинаково) - примерно так:

Код


function f(event,dir) {
   var el = event.target||event.srcElement;
   if (el.tagName.toLowerCase() == 'input' || el.tagName.toLowerCase() == 'textarea') {
      if (el.className && el.className.indexOf('input_') > -1) {
         if (dir==1) {
            el.className += ' hover';
         } else {
            el.className = el.className.replace(' hover', '');
         }
      }
   }
}

Код


<style type="text/css">
...
.hover {
    background: #606060;
    color: #FFFFFF;
}
</style>
...
<form onmouseover="f(event,1)" onmouseout="f(event,0)">

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

GZep

Дата 3.11.2006, 16:07 (ссылка)

(голосов:1)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32

Спасибо, но меня все-таки интересует вариант с циклом... smile

--------------------

SelenIT

Дата 3.11.2006, 16:17 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

GZep, да что Вы на этом цикле зациклились-то, простите за каламбур? Насколько я могу судить, делать это циклом сейчас "не модно и не современно".

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Nicholas_S

Дата 3.11.2006, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

GZep, ноу проблема:

Код



var inpts = getElementById('formID').getElementsByTagName('input');
for (var i=0, i<inpts.length; i++)
{
  if (inpts[i].type.toLowerCase()=='checkbox')
  {
      inpts[i].onmouseover = function () {this.className = 'class2';}
      inpts[i].onmouseout   = function () {this.className = 'class1';}
  }
}

--------------------

...все в мире относительно

SelenIT

Дата 3.11.2006, 16:23 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

GZep

Дата 3.11.2006, 16:35 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32

Nicholas_S, то, что нужно! Спасибо! Прошу извинить меня за настырность с этим циклом. Мне правда неловко! Всем Спасибо. Сейчас напишу универсальную ф-цию и выложу её для народа...
smile

Это сообщение отредактировал(а) GZep - 3.11.2006, 16:35

--------------------

Nicholas_S

Дата 3.11.2006, 17:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

SelenIT, ...нужно! smile

Добавлено @ 17:25
...блин, почему у меня кешируется все и не обновляется, ниче не пойму...

--------------------

...все в мире относительно

AKS

Дата 3.11.2006, 18:02 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

SelenIT,

Цитата

Вы на этом цикле зациклились...

Прямо в "яблочко", как говорится! ;) Что ж, поделюсь с Вами своими "впечатлениями" по теме, т.к. автора темы, похоже, Вам "спасти" не удалось... ;)
Чуть-чуть переделал Ваш пример, ведь судя по таблице стилей, нужно на самом деле совсем немного (по "вашим следам" - легче топать ;) ):

Код


function f(e) {
  var el = e.target || e.srcElement, n = el.className;
  if(n.indexOf('input_') > -1)
    el.className = (e.type == 'mouseover') ? n + ' hover' : 
      n.replace(' hover', '');
}

Вызов:

Код


<form onmouseover='f(event)' onmouseout='f(event)'>

SelenIT

Дата 3.11.2006, 18:21 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

AKS, здорово. Только я бы постраховался и проверил n на существование...

И еще очень хочется навесить вызовы из скрипта же, не трогая HTML - к сожалению, этому я еще не научился, может быть, поможете?

В принципе, в данном конкретном случае кроссбраузерность не нужна (в других браузерах CSS справляется сам), так что можно и не передавать событие при вызове, тогда весь JS легко выносится из HTML (и оформляется в виде .htc, к примеру). Но интересно динамическое навешивание обработчиков в общем случае, когда ссылка на event обязательна...

Это сообщение отредактировал(а) SelenIT - 3.11.2006, 18:21

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

12345c

Дата 3.11.2006, 19:06 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

А что мешает делать так?

Код

<style>//Для субмита, ресета и простой кнопки
.fhover input{
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 0px;
    border: 0px;
    height: 20px;
}
.fhover:hover input, .fhover2 input {
    background: #606060;
    color: #FFFFFF;
}
</style>
<form>
<div class=fhover onmouseover=this.className='fhover2' onmouseout=this.className='fhover'>
  <input type=text >
  <input type=text >
  <input type=checkbox >
</div></form>

hover становится несколько излишним, но для перестраховки не мешает.

Можно сделать и через behavior-стиль для IE: http://js2.ru/example/JsPrimeryCode-84.htm (пример - таблица)

Т.е. вопрос к автору темы - зачем стремиться к циклам, если без них работает?

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:18

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

AKS

Дата 3.11.2006, 19:07 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

SelenIT,

Цитата

интересно динамическое навешивание обработчиков в общем случае

Так ведь в функцию передается первым параметром ссылка на объект Event.

Цитата

n на существование...

Зачем?

Код


alert(''.indexOf('input_')); // -1

SelenIT

Дата 3.11.2006, 19:21 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

12345c, насколько я понял, автору нужно подсвечивать только один элемент, а не группу. Поэтому вариант с контейнером, по-моему, мимо. А вот behavior - по-моему, самое то.

AKS, с проверкой действительно я перемудрил - мне казалось, что при отсутствии класса у элемента n останется undefined, не подумал, что оно преобразуется в пустую строку...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »