Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> hover элементов формы на javascript 
:(
    Опции темы
AKS
Дата 3.11.2006, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
SelenIT, вот, собрал из "домашних заготовок", для данного случая (пусть у формы будет id='forma'):
Код

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', '');
}
function a(o, e, f) {
  e = (e instanceof Array) ? (arguments.callee(o, e[1], f), e[0]) : e; 
  (o.attachEvent) ? o.attachEvent(e, f) : (o.addEventListener) ? 
    o.addEventListener(e.substr(2), f, false) : '';
}
a(window, 'onload', function() {
  a(document.getElementById('forma'), ['onmouseover', 'onmouseout'], f);
});
PM MAIL   Вверх
SelenIT
Дата 3.11.2006, 19:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
AKS, большое спасибо!
Опять этот "Коля" (callee)... видно, пришла пора мне познакомиться с ним поближе, в XXI веке без него никак smile


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
AKS
Дата 3.11.2006, 19:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
SelenIT, "Колей" Zeroglif "ласково" называет caller'а - вызывающий объект, короче сказать, то самое, куда в функции укажет this. А здесь у нас arguments.callee - указатель на текущую функцию (удобная штучка ;) ).
PM MAIL   Вверх
SelenIT
Дата 3.11.2006, 19:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
Мда, вот как у меня, оказывается, все запущено - такие базовые вещи путаю...  smile 
буду срочно исправляться!


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
AKS
Дата 3.11.2006, 19:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
SelenIT, arguments.callee незаменим в анонимных функциях. Вот пример, только что взял у "себя" с Xpoint (можно было бы так функцию f "присобачить"):
Код

(function(e) {
  (window.attachEvent || (e = e.substr(2), window.addEventListener))
  (e, function(o, e) { o = (o.tagName) ?  o : document.getElementById('forma'); 
    if(!e) arguments.callee(o, 'onmouseover');
    ((e = e || 'onmouseout', o.attachEvent) || (e = e.substr(2),
      o.addEventListener))(e, f, !1); }, !1);
})('onload');


Добавлено @ 19:50 
SelenIT, что-то я глянул "со стороны" на фразу "взял у себя" - нехорошо! Основная идея в этом примере (obj.method || obj.another_method)() - от Zeroglif!
PM MAIL   Вверх
SelenIT
Дата 3.11.2006, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
AKS, мощно, внушает  smile 
Выходит, именно этой arguments.callee мне последнее время и не хватало. А я-то все пытался какими-то обходными маневрами this переназначить...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
AKS
Дата 3.11.2006, 19:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
SelenIT, не-е-е, this не переназначить ни "обходными маневрами", ни какими другими - он "упрямый". Так что берегите время, оставьте его в покое ;) ...
PM MAIL   Вверх
GZep
Дата 4.11.2006, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 2
Всего: 32
Значит так... smile 

Сразу скажу, что от цикла я отказывать не буду.(без цикла у меня уже есть давно пример кода)

А вот, что у меня получилось нахимичить с циклом(не смейтесь тока smile )
Код

<html>
<head>
<style type="text/css">
<!--
//Класс для "не кнопок"(текст, список и т.д.
.input_field {
    color: #C0C0C0;
    background: #000000;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
//Тоже самое, тока при наведении мышки
.input_field_hover {
    color: #FFFFFF;
    background: #606060;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
//Класс для кнопок("батон", "ресет", "субмит")
.input_button {
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 2px;
    border: 1px;
    height: 20px;
}
//Тоже самое, тока при наведении мышки
.input_button_hover {
    color: #FFFFFF;
    background: #606060;
    font: 14px Comic Sans MS;
    margin: 2px;
    border: 1px;
    height: 20px;
}
// -->
</style>
<script language="JavaScript" type="text/javascript">
<!--
document.body.onload=function() {
    content_form_elements = document.getElementsByTagName('input');
//цикл for ( ; ; ) не работает!!! Не пойму почему!!
    //for(i=0;i<(content_form_elements.length-1);i++) {
//А вот мой тупейший способ с for in почему то заработал
    i=0;
    for (c in content_form_elements) {
// Переменная "с" - это...эээ...часть моего гениального плана по захвату мира...
        //alert (content_form_elements[i].type);
//Вот, обратите внимание на следующею строчку, без неё код после ф-ции в опере не выполняется, как при ошибке
        if (i==(content_form_elements.length-1)) break;
//ну, радио и чеки боксы пропускаем
        if (content_form_elements[i].type=='checkbox' || content_form_elements[i].type=='radio') {
            i++;
            continue;
        }
//мясо(кнопки) в одну сторону
        if (content_form_elements[i].type=='button' || content_form_elements[i].type=='submit' || content_form_elements[i].type=='reset') {
            content_form_elements[i].className = 'input_button';
            content_form_elements[i].onmouseover = function () {
                this.className = 'input_button_hover';
            }
            content_form_elements[i].onmouseout = function () {
                this.className = 'input_button';
            }
//насекомых(не кнопки) в другую
        } else {
            content_form_elements[i].className = 'input_field';
            content_form_elements[i].onmouseover = function () {
                this.className = 'input_field_hover';
            }
            content_form_elements[i].onmouseout = function () {
                this.className = 'input_field';
            }
        }
        i++;
    }
}
// -->
</script>
</head>
<body>
Тут боди
</body>
</html>


Меня интересует цикл for ( ; ; ), точнее то, почему он "не пашет"
 smile 


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 4.11.2006, 19:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
Цитата(GZep @  4.11.2006,  18:30 Найти цитируемый пост)
код после ф-ции в опере не выполняется, как при ошибке

А в Tools -> Advanced -> Error console ничего при этом не пишется?


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
GZep
Дата 4.11.2006, 19:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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

Event thread: load
Error:
name: TypeError
message: Statement on line 85: Could not convert undefined or null to object
Backtrace:
  Line 85 of inline#1 script in http://localhost/text.php
    if (content_form_elements[i].type == "checkbox" || content_form_elements[i].type == "radio")
          Line 28 of inline#2 script in http://localhost/text.php
    HoverFormElements();
  At unknown location
    [statement source code not available]


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 4.11.2006, 19:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
GZep, а что такое HoverFormElements() и откуда оно взялось?


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
AKS
Дата 4.11.2006, 20:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

Репутация: 27
Всего: 52
Я попробовал убрать кое-что из кода и проверил - вроде бы работает. Может так:
Код

function GZep_hover(e) {
  var el = (e = e || event).target || e.srcElement,
  n = el.className;
  el.className = (e.type == 'mouseover') ? n + '_hover' : 
    n.replace('_hover', '');
}

onload = function() {
  var a = document.getElementsByTagName('input'),
  e,  f = GZep_hover;
  for(var i = 0; e = a[i]; i++) {
    if(e.type == 'checkbox' || e.type == 'radio') continue;
    else if(e.type == 'button' || e.type == 'submit' || e.type == 'reset') {
      e.className = 'input_button';
      e.onmouseover = e.onmouseout = f;
    } 
    else {
      e.className = 'input_field';
      e.onmouseover = e.onmouseout = f;
    }
  }
}
PM MAIL   Вверх
GZep
Дата 4.11.2006, 20:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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

GZep, а что такое HoverFormElements() и откуда оно взялось?


Это у меня так ф-ция называется. Перед тем, как выложить разметку, я естественно покорректировал её(убрал то, что не в тему).

HoverFormElements() { = onload.function() {
 smile

Добавлено @ 20:58 
Цитата

Я попробовал убрать кое-что из кода и проверил - вроде бы работает. Может так:код Javascript

немогли бы Вы код с комментариями дать. smile 


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
AKS
Дата 4.11.2006, 21:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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

немогли бы Вы код с комментариями дать

Я бы с удовольствием, только я не знаю, что комментировать - ведь это же ваш код, просто я убрал несколько строк, показавшихся мне лишними. Напишите, что именно Вас интересует? 
PM MAIL   Вверх
SelenIT
Дата 4.11.2006, 21:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

Репутация: 49
Всего: 401
GZep, у Вас переменная content_form_elements (и не только она), была глобальной, поэтому влиять на работу кода могло даже то, "что не в тему" (и, судя по сообщению Оперы, как раз влияло)...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0582 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.