Блог о программировании

Всплывающие уведомления на jquery+bootstrap

Категория: Javascript
 21 февраля 2016 г. 18:55

Довольно часто требуется реализовать всплывающие уведомления на сайте для того или иного случая.

Самый простой способ - это взять фреймворк 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);
Теги:  jQuery  bootstrap 

Поделиться статьей

Оставить комментарий