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

AKS

Дата 7.11.2006, 13:18 (ссылка)

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

Загрузка ...

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

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

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

GZep,

Качайте сценарий
Подключайте через таблицу стилей вот так: body { behavior:url("csshover.htc"); }
Используйте сценарий в соответствии с лицензией

GZep

Дата 7.11.2006, 13:57 (ссылка)

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

Загрузка ...

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

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

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

Ну а как это работает Вы мне объяснить можите? По-моему там много лишнего...регулярное выражение вот краем глаза вижу...Что это за проект? Это проект, который направлен конкретно на hover элементов формы в ИЕ? Или чтоб вообще сделать hover полнофункциональным.
Не скудитесь, пожалуйста, на слова. Хочется же не просто сделать, а еще и понять, что сделал.

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

AKS

Дата 7.11.2006, 14:26 (ссылка)

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

Загрузка ...

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

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

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

GZep,

Цитата

...вообще сделать hover полнофункциональным

Этот сценарий позволяет эмулировать поведение псевдоклассов :hover и :focus в IE для всех элементов, к которым они применены в таблице стилей. Конечно же для вашего случая там много лишнего - сценарий для вашей формы может быть лаконичней (что я мог предложить, я уже предлагал).

GZep

Дата 7.11.2006, 16:30 (ссылка)

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

Загрузка ...

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

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

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

AKS, вот Ваш пример, только немного переделал(сделал более читабельным), но суть не изменил. Чуть не забыл: я его в тело условия запихнул, которое проверяет тип браузера.

Код


if (navigator.appName == "Microsoft Internet Explorer") {
    function f(e) {
        var el = e.target || e.srcElement, n = el.className;
        if(n.indexOf('input_') > -1) {
            if (e.type == 'mouseover') {
                el.className = n + ':hover'
            } else {
                el.className = n.replace(':hover', '');
            }
        }
    }
    function a (o, e, f) {
        if (e instanceof Array) {
            e = arguments.callee(o, e[1], f), e[0]
        }
        if (o.attachEvent) {
            o.attachEvent(e, f);
        } else if (o.addEventListener) {
            o.addEventListener(e.substr(2), f, false);
        }
    }
    a (window, 'onload', function() {
        a(document.getElementById('form'), ['onmouseover', 'onmouseout'], f);
    });
}

id формы - form.
e = arguments.callee(o, e[1], f), e[0]//ИЕ выдает ошибку: "\"0\" - есть null и не является объектом"
Всё это можно как-нибудь в виде одной ф-ции записать? А не в виде 3-х...

AKS, пожалуйста, не поленитесь помоч мне "разжувать" эту тему...

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

AKS

Дата 7.11.2006, 17:34 (ссылка)

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

Загрузка ...

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

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

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

GZep,

Цитата

Всё это можно как-нибудь в виде одной ф-ции записать?

Можно:

Код


function GZep(e) {
  var el = e.srcElement;
  if(el) {
    var n = el.className;
    if(n.indexOf('input_') > -1) {
      if(e.type == 'mouseover') {
        el.className = n + ' hover';
      } 
      else {
        el.className = n.replace(' hover', '');
      }
    }
  }
}

Потом в форме:

Код


<form id='form' onmouseover='GZep(event)' onmouseout='GZep(event)' action='' method=''>

И не пытайтесь добавить к имени стилевого класса строку ":hover". У Вас должен быть дополнительный класс .hover, имя которого и будет добавляться (удаляться) к уже имеющимся именам классов элементов формы.

GZep

Дата 7.11.2006, 18:12 (ссылка)

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

Загрузка ...

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

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

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

Ну а как сделать чтоб только в ИЕ эта функция выполнялась? Воткнуть её в тело условия, а для других браузеров сделать эту функцию пустой? или как?

И зачем форме id присваивать в этом примере? Он ведь не нужен...

Это сообщение отредактировал(а) GZep - 7.11.2006, 18:22

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

AKS

Дата 7.11.2006, 18:30 (ссылка)

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

Загрузка ...

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

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

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

GZep,

Цитата

как сделать чтоб только в ИЕ эта функция выполнялась

А она и будет только в IE выполняться (сделайте первое условие пожестче против Opera if(el && !window.opera), а то я забыл).

Цитата

зачем форме id присваивать в этом примере

Вы написали, а я повторил...

GZep

Дата 8.11.2006, 12:12 (ссылка)

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

Загрузка ...

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

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

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

Финальный вариант.

CSS

Код


.input_field {
    color: #C0C0C0;
    background: #000000;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
.input_button {
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 0px;
    border: 1px;
    height: 20px;
}
.input_button:hover, .input_field:hover {
//Здесь можно записать только изменяющиеся параметры(у меня цвет текста и фона)
    color: #FFFFFF;
    background: #606060;
}

JavaScript
Для Windows Internet Explorer и Microsoft Internet Explorer

Код


if (navigator.appName == "Microsoft Internet Explorer" && !window.opera) {
    window.onload = function() {
        var forms = document.getElementsByTagName('form');
        for (var i=0; forms[i]; i++) {
            forms[i].onmouseover = function() {
                hoverForm(event);
            }
            forms[i].onmouseout = function() {
                hoverForm(event);
            }
        }
    }
}
function hoverForm(ElementEvent) {
    var el = ElementEvent.srcElement;
    if(el && !window.opera && !el.disabled) {// && !el.disabled - чтоб для элементов с атрибутом disabled эта функция вообще ничего не делала
        var n = el.className;
        if(n.indexOf('input_') > -1) {
            if(ElementEvent.type == 'mouseover') {
                //Перечисляем все, что нужно изменить при наведении мыши
                el.style.backgroundColor="#606060";
           el.style.color="#FFFFFF";
            } else {
                //Перечисляем все, что нужно изменить при отведении мыши
                el.style.backgroundColor="#000000";
                el.style.color="#C0C0C0";
            }
        }
    }
}

HTML резметка

Код


<form action="" method="">
<input type="submit" class="input_button">
<input type="reset" class="input_button">
<input type="button" class="input_button">
<input type="text" class="input_field">
<input type="password" class="input_field">
<select class="input_field"></select>
<textarea class="input_field"></textarea>
<form>

Чек боксы и радио "батоны" в этой теме не рассматриваются!
Этот вариант идогда обновляется, если Вы его используете у себя, то советую иногда заглядывать сюда и сверять! Обращайте внимание на дату редактирования.
Жду отзывы и замечания, если таковые имеются!

P.S.
AKS, поправь, пожалуйста, если что-то не так сделал.

Добавлено:

Теперь javascript функция будет выполняться только в Internet Explorer. В других браузерах эта функция вообще ни разу вызываться не будет. Это немного ускоряет работу скрипта, ведь раньше все браузеры вызывали функцию и прекращали ее выполнять когда натыкались на условие в ней. Теперь подсветка в браузерах отличных от ИЕ будет выполняться исключительно при помощи css. И теперь не надо писать:
<form onmouseover="HoverForm(event)" onmouseout="HoverForm(event)">,
теперь надо просто:
<form>
smile

Это сообщение отредактировал(а) GZep - 21.11.2006, 15:48

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

GZep

Дата 21.11.2006, 15:40 (ссылка)

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

Загрузка ...

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

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

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

Народ, прокомментируйте, пожалуйста, если есть какие-либо замечания...

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

12345c

Дата 21.11.2006, 16:49 (ссылка)

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

Загрузка ...

Круглый

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

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

Модифицирую приведённый пример, чтобы показать другой способ достижения того же:

Код

<style>.input_field,.input_button {
  color: #ccc; /*та же основа, но с некоторыми дополнениями*/
  background: #000;
  border: 1px solid #c0c;
  font: bold 14px Comic Sans MS;
  behavior: url(JsPrimeryCode-43.htc); /*для IE*/
}
.input_button {  margin:0;  border:0;  height: 22px;
}
.hovered,.input_button:hover, .input_field:hover{ /*hovered - класс для IE*/
  color: #fff;  /*изменяющиеся параметры*/
  background: #999;
}</style>
<form action="" method="">
<input type="submit" class="input_button">
<input type="reset" class="input_button">
<input type="button" class="input_button" value=222>
<input type="text" class="input_field" size=10 value=333>
<input type="password" class="input_field" size=10 value=444><br>
<select class="input_field"><option>111</option><option>111</option><option>111</option><option>111</option></select>
<textarea class="input_field">555</textarea>
<form>

Файл JsPrimeryCode-43.htc :

Код

<attach for=element event=onmouseover handler=hig_light>
<attach for=element event=onmouseout handler=low_light>
<script>
function hig_light(){element.className+=' hovered';}
function low_light(){element.className=element.className.replace(/ hovered/,'');}
</script>

Демо - на http://javascript.aho.ru/example/zzzz55.htm (+ укоротил описания стилей)

Это сообщение отредактировал(а) 12345c - 21.11.2006, 17:06

GZep

Дата 21.11.2006, 18:27 (ссылка)

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

Загрузка ...

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

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

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

12345c, так прокомментируйте вариант раз Вы его выложили. Расскажите как он работает, его достоинства и недостатки.

Цитата(12345c @ 21.11.2006, 16:49

)

className.replace(/ hovered/,'');}

Вот я не пойму зачем вообще в подобных вещах пользоваться replace. Это ведь функция, для работы с текстом. Разве не быстрее просто менять имя класса?

Кроме того я заметил одну такую особенность в поведении javascript: при изменении класса с помощью javascript изменяются все параметры. Например, вы создали класс, где указан цвет фона и цвет рамки, а потом поменяли ява скриптом этот класс на другой, где указан только цвет фона. Так что же? Вы думаете что цвет фона поменяется, а цвет рамки останется от предыдущего класса? Ничего подобного! Цвет рамки в таком случае поменяется на стандартный, установленный в настройках браузера. Поэтому в своем примере я сделал так, что javascript вообще не меняет имя класса, а просто заменяет цвета, без css, сам.
Это я так, к теме сказал... smile

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

12345c

Дата 21.11.2006, 18:36 (ссылка)

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

Загрузка ...

Круглый

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

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

А что комментировать, и так всё видно. Недостаток - лишний файл. Достоинство - компактнее. replace - чтобы убрать только добавленное имя класса, не трогая те, что были до него.

Цитата(GZep @ 21.11.2006, 18:27

)

Например, вы создали класс, где указан цвет фона и цвет рамки, а потом поменяли ява скриптом этот класс на другой, где указан только цвет фона. Так что же? Вы думаете что цвет фона поменяется, а цвет рамки останется от предыдущего класса?

Вы, видимо, не заметили, что я не поменял класс, а добавил : ) :

Цитата

element.className+=' hovered'

GZep

Дата 22.11.2006, 14:13 (ссылка)

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

Загрузка ...

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

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

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

Цитата(12345c @ 21.11.2006, 18:36

)

Вы, видимо, не заметили, что я не поменял класс, а добавил : ) :

Я это прекрасно понял. Я это писал не к Вашему примеру, а просто рассказал особенность поведения javascript, по скольку это уместно в данной теме.

Цитата(12345c @ 21.11.2006, 18:36

)

А что комментировать, и так всё видно.

Ну, не все же такие профи smile

Кстати, по вашему примеру то, что я говорил про особенность javascript все-таки относится, вроде. Вот посмотрите:

Код


<style>.input_field,.input_button {
  color: #ccc; /*та же основа, но с некоторыми дополнениями*/
  background: #000;
  border: 1px solid #c0c;
  font: bold 14px Comic Sans MS;
  behavior: url(JsPrimeryCode-43.htc); /*для IE*/
}
.input_button {  margin:0;  border:0;  height: 22px;
}
.hovered,.input_button:hover, .input_field:hover{ /*hovered - класс для IE*/
  color: #fff;  /*изменяющиеся параметры*/
  background: #999;
}</style>

Этот отрезал из вашего кода. Сдесь при включении input_button:hover(это произойдет в опере и мозиле) все будет нормально, например параметр font останется от класса input_field,.input_button, где он был задан. А вот в ИЕ, где замену класса будет выполнять javascript не будет наследоваться параметры. То есть font станет стандартным, браузерным. В своем примере я это исправил примитивным, но надежным путем, я просто не менял класс, а задал параметры, которые надо поменять вручную, без css. Вот так ваш вариант будет работать правильно в ИЕ:

Код


<style>.input_field,.input_button {
  color: #ccc; /*та же основа, но с некоторыми дополнениями*/
  background: #000;
  border: 1px solid #c0c;
  font: bold 14px Comic Sans MS;
  behavior: url(JsPrimeryCode-43.htc); /*для IE*/
}
.input_button {  margin:0;  border:0;  height: 22px;
}
.hovered,.input_button:hover, .input_field:hover{ /*hovered - класс для IE*/
  color: #fff;  /*изменяющиеся параметры*/
  background: #999;
  border: 1px solid #c0c;
  font: bold 14px Comic Sans MS;
}</style>

Вот так вот. Ваше мнение...??? smile

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

Zeroglif

Дата 22.11.2006, 15:16 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 28
Всего: 66

Цитата(GZep @ 22.11.2006, 14:13

)

Я это прекрасно понял.

Совершенно не поняли. Яваскрипт не при чём, сложно ожидать от замены имени класса какого-то там наследования. smile

Цитата(GZep @ 22.11.2006, 14:13

)

А вот в ИЕ, где замену класса будет выполнять javascript не будет наследоваться параметры. То есть font станет стандартным, браузерным.

Откуда такой вывод про IE и Javascript? Есть же живая ссылка на пример, разве вы не видите, что у элементов форм при наведении меняется фон, а шрифт остаётся тот же? Замена класса может быть прописана в стиле, естесственно предыдущий класс будет "забит" последующим, это обычное поведение для стилей, явакскрипт, бедный, ни при чём.

Цитата(GZep @ 22.11.2006, 14:13

)

я просто не менял класс

Автор скрипта тоже не меняет класс, он добавляет класс, разные вещи же:

Код


<input type="text" class="cl1">

против

Код


<input type="text" class="cl1 cl2 cl3 cl4 cl5">

Выше много классов, они могут перекрывать друг друга (если свойства сопадают, это по сути замена одного класса на другой), а могут дополнять. Если вам нужно при наведении только изменить цвет фона, то вы добавляете (а не удаляете/заменяете предыдущий) новый класс отдельно для фона, а потом убираете его (метод replace, привет). Если же вы заменяете один класс на другой, то само собой вам приходится полностью переносить все свойства (а их может быть ой-ой-ой сколько) в новый класс. Вам оно надо? smile

Это сообщение отредактировал(а) Zeroglif - 22.11.2006, 15:31

GZep

Дата 22.11.2006, 15:58 (ссылка)

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

Загрузка ...

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

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

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

Цитата(Zeroglif @ 22.11.2006, 15:16

)

Автор скрипта тоже не меняет класс

Это разве не изменение:

Цитата

el.className=

Я имею ввиду, что при использовании метода или свойства или как там это в яваскрипте наз-ся, короче при изменении className никакого наследования не происходит, элемент просто забывает про предыдущий класс и к нему присваивается новый. Свойства не заменяются при совпадении, они просто становятся стандартными, кроме тех, что указаны в новом классе. Это я, кстати, на практике видел... smile

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

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