VPF::Toolbar с залипающими кнопками на jQuery

kinos

Дата 31.10.2011, 13:06 (ссылка)

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

Загрузка ...

Новичок

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

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

Доброго времени суток!

Мне нужно написать тулбар на jQuery, в котором при нажатии одной кнопки, другая нажатая "отжималась"(что-то вроде механических кнопок на аппаратуре) smile

Единственный похожий пример в плане поведения кнопок нашёл вот здесь: http://dominika.osadcow.pl/na_zyczenie/
Хорошо бы сделать это через изменение стиля или другим универсальным способом, не тянуть за собой кучу картинок.

Ниже приведён мой код на JS, который при наведении/нажатии/отведении/отжатии меняет картинки.
Функции смены картинки:

Код


function iconMouseOver(num, obj) {
    if (num == 1) {
        obj.src = "./Images/css/walk.png";
    }
    else if (num == 2) {
        obj.src = "./Images/css/fly.png";
    }
}
function iconMouseOut(num, obj) {
    if (num == 1) {
        obj.src = "./Images/css/walk_f.png";
    }
    else if (num == 2) {
        obj.src = "./Images/css/Fly_f.png";
    }
}
function iconMouseDown(num, obj) {
    if (num == 1) {
        obj.src = "./Images/css/walk_s.png";
    }
    else if (num == 2) {
        obj.src = "./Images/css/Fly_s.png";
    }
}
function iconMouseUp(num, obj) {
    if (num == 1) {
        obj.src = "./Images/css/walk_f.png";
    }
    else if (num == 2) {
        obj.src = "./Images/css/Fly_f.png";
    }
}

Данные функции вызываются в функции отбора:

Код


function isChanged(type, number, object) {
    //check if this is not a previously clicked button
    if (number != clickedNum) {
        if (type == 0) {
            iconMouseDown(number, object);
            if (clickedNum == 0) {
                clickedObj = object;
            }
            else { iconMouseUp(clickedNum, clickedObj); }

            clickedNum = number;
            clickedObj = object;
            return;
        }
        else if (type == 1) {
            iconMouseOver(number, object);
        }
        else if (type == 2) {
            iconMouseOut(number, object);
        }
    }
    else { }
}

которая используется в XHTML следующим образом:

Код


<input type="image" src="./Images/css/walk_f.png" name="nwWalk" title="Идти" onclick="nwParadigmWalk()"
               onmouseover="isChanged(1,1,this)" onmouseout="isChanged(2,1,this)"
               onmousedown="isChanged(0,1,this)" onmouseup="isChanged(3,1,this)" id="I1" />
        <input type="image" src="./Images/css/Fly_f.png" name="nwFly" title="Лететь" onclick="nwParadigmFly()" 
               onmouseover="isChanged(1,2,this); " onmouseout="isChanged(2,2,this)"
               onmousedown="isChanged(0,2,this)" onmouseup="isChanged(3,2,this)" />
</input>

Это сообщение отредактировал(а) kinos - 31.10.2011, 13:13

Присоединённый файл ( Кол-во скачиваний: 2 )

toolbar.png 0,99 Kb

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