Разноцветные уведомления для uCoz

2311 просмотров Alan_Writer 17.12.2013

Представляем новую систему разноцветные уведомления для uCoz. На этой странице не будут расписаны все варианты уведомлений и то, как они вообще работают, просто будет пара примеров и описание возможностей скрипта. Автор постарался и сделал 6 вариантов уведомлений, отличаются только цветом. Впрочем, Вы сами можете легко задать свой стиль для всплывающих окон.

Установка скрипта:

1). Загрузите файл uAlert.js в корень сайта.

2). Вставьте следующий код в нижнюю часть сайта:

Код

3). В таблицу стилей (CSS) вставьте это:

Код

#ualert_cont {position:fixed;bottom:17px;right:17px;width:290px;}
.ualert {cursor:pointer;opacity:0;color:#fff;margin:10px 0;border-radius:5px;font:11px Verdana,sans-serif;padding:15px}
.ualert.red {background:#cd4040;}
.ualert.green {background:#9dcd40;}
.ualert.blue {background:#409dcd;}
.ualert.violet {background:#9d40cd;}
.ualert.yellow {background:#cd9d40;}
.ualert.black {background:#262626;}

Готово. Теперь перейдем к самому главному - показам уведомлений.

Вызов уведомления

Код

uAlert.open('ID уведомления','Цвет','Само уведомление (HTML)',таймер_выключения,{скрипт_для_окошка});

Варианты цвета: red, green, blue, violet, yellow, black. В CSS можно самому задать свои цвета.

Таймер устанавливается в миллисекундах. Например если хотите, что сообщение исчезло через 3 секунды, то ставьте значение 3000 без кавычек. Хотите чтобы уведомление не исчезало вообще? Ставьте 0.

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

Закрытие уведомления

Здесь все просто:

Код

uAlert.remove('ID уведомления');

Настройка окошка

Всегда можно изменить уже существующее уведомления с помощью следующего кода:

Код

uAlert.set('ID уведомления',{color:'цвет', html: 'Само уведомления' ...});

Пример уведомления

Ну, а теперь самая важная часть - пример:

Код

uAlert.open('id1234','green','Успешно выполнено!',0,{onclick:'alert("Вы нажали на это окошко");'});
uAlert.set('id1234',{color:'red',html:'Ошибка системы. Попробуйте позднее.',hide:3000});
uAlert.remove('id1234');

Теперь точно все, надеюсь вы все поняли, в отличие от меня...

Теги: цветные уведомления, uWnd-окна, вид уведомлений, вид окон, Разноцветные уведомления

1 Комментарий