WEB-программирование: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrNotifyBar».
Скачать файлы с описанными классами можно здесь(версия 1.4).
Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").
Продолжаем изучать библиотеку визуальных компонентов. Сегодня изучим поле уведомлений CXBrNotifyBar. Вот как оно выглядит:
Класс CXBrNotifyBar предназначен для вывода диагностических сообщений. Вот текст тестового примера:
|
<HTML> <head> <title></title> <LINK HREF="notify.css" REL="stylesheet" TYPE="text/css"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrBase.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalVars.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalProc.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrVisual.js"> </SCRIPT> <SCRIPT Language="JavaScript" type="text/javascript">
</SCRIPT> </head>
<BODY> <div id="1">
</div> <div id="2">
</div> <SCRIPT Language="JavaScript" type="text/javascript">
function ButtonClick() { div1=document.getElementById("1"); mb=new CXBrNotifyBar(div1); mb._images["info"]="imgmsg/info.bmp"; mb._images["warning"]="imgmsg/warning.bmp"; mb._images["error"]="imgmsg/error.bmp"; mb._draw(); mb._message("Тестовое сообщение",nms_info); mb._message("Тестовое предупреждение",nms_warning); mb._message("Тестовое важное предупреждение",nms_important_warning); mb._message("Тестовая ошибка",nms_error);
}
</SCRIPT> <input type="submit" value="Нажать сюда" OnClick="ButtonClick()"><br> </BODY> </HTML> |
Для того, что бы строка с важным предупреждением была красной, в файл стилей notify.css введем такую строку:
|
.notify_cells_important_warning_style { color:red; } |
Класс CXBrNotifyBar использует следующие классы CSS:
| Класс CSS | Назначение |
| notify_table_style | Стиль самого поля сообщений (см. скриншот и пример внизу таблицы) |
| notify_cells_message_style | Стиль сообщения без иконки |
| notify_cells_info_style | Стиль сообщения "информация" |
| notify_cells_warning_style | Стиль сообщения "внимание" |
| notify_cells_important_warning_style | Стиль сообщения "внимание, важно" |
| notify_cells_error_style | Стиль сообщения "ошибка" |
| notify_cells_composit_error_style | Стиль сообщения "составная ошибка" |
давайте проиллюстрируем пример использования класса CSS notify_table_style:
|
.notify_table_style { border-top:double; border-right:double; border-bottom:double; border-left:double; } |
И вот результат:
Картинки для поля сообщений можно скачать здесь.