Всплывающие уведомления на jquery+bootstrap
Довольно часто требуется реализовать всплывающие уведомления на сайте для того или иного случая.
Самый простой способ - это взять фреймворк bootstrap и использовать оттуда уведомления. Они хорошо сверстаны и снабжены js-кодом для управления. Единственное, чего нехватает, так это управляющего кода, который будет генерировать всплывающие уведомления для пользователя.
Идея простая: у нас есть фиксированный элемент div#notifies в верхнем правом углу(координаты: right:0; top:0;) с автоматической настройкой ширины и высоты(height:auto; width:auto;). С помощью jQuery формируем элемент уведомления, ставим ему по таймеру автоматическое сокрытие через 5 секунд и добавляем его в div#notifies.
Фактически, все. Ниже приведен код этой реализации:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- Bootstrap CSS file -->
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<style>
#notifies {
position:fixed;
width:auto;
height:auto;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="notifies"></div>
<div id="body" class="container">
<h1>Стандартный bootstrap-шаблон</h1>
</div>
<!-- Jquery and Bootstrap Script files -->
<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script>
Notify = {
TYPE_INFO: 0,
TYPE_SUCCESS: 1,
TYPE_WARNING: 2,
TYPE_DANGER: 3,
generate: function (aText, aOptHeader, aOptType_int) {
var lTypeIndexes = [this.TYPE_INFO, this.TYPE_SUCCESS, this.TYPE_WARNING, this.TYPE_DANGER];
var ltypes = ['alert-info', 'alert-success', 'alert-warning', 'alert-danger'];
var ltype = ltypes[this.TYPE_INFO];
if (aOptType_int !== undefined && lTypeIndexes.indexOf(aOptType_int) !== -1) {
ltype = ltypes[aOptType_int];
}
var lText = '';
if (aOptHeader) {
lText += "<h4>"+aOptHeader+"</h4>";
}
lText += "<p>"+aText+"</p>";
var lNotify_e = $("<div class='alert "+ltype+"'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>"+lText+"</div>");
setTimeout(function () {
lNotify_e.alert('close');
}, 3000);
lNotify_e.appendTo($("#notifies"));
}
};
</script>
</body>
</html>Создавать новые уведомления можно так:
Notify.generate('Текст уведомления', 'Заголовок уведомления', тип уведомления: число от 0 до 3);
Comments