TODAY 181
부트스트랩 알림 사용법 ( bootstrap-notify )
bootstrap-notify 가이드 : http://bootstrap-notify.remabledesigns.com/
bootstrap-notify 깃허브 : https://github.com/mouse0270/bootstrap-notify

 

JS 파일 가져오기 및 작성하기

<!-- Bootstrap Core CSS -->
<link href="<c:url value='/static/vendor/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">
<!-- animate CSS -->
<link href="<c:url value='/static/vendor/animate/animate.min.css'/>" rel="stylesheet">
<!-- Custom CSS-->
<link href="<c:url value='/static/css/custom.css'/>" rel="stylesheet">
<!-- jQuery -->
<script src="<c:url value='/static/vendor/jquery/jquery.min.js'/>"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<c:url value='/static/vendor/bootstrap/js/bootstrap.js'/>"></script>
<!-- bootstrap-notify JavaScript -->
<script src="<c:url value='/static/vendor/bootstrap-notify/bootstrap-notify.min.js'/>"></script>
<!-- Custom JS-->
<script src="<c:url value='/static/js/custom.js'/>"></script>
가져온 CSS : Bootstrap , animate , Custom (작성예정)
가져온 JS : Jquery, Bootstrap, Bootstrap-notify, Custom (작성예정)
TIp) 가져온 순서를 잘 지켜주세요

 

custom.js
<- 실행시킬 함수 시작 ->
         $.notify({
             icon: '../../static/img/bell.png',
             title: '알람 제목',
             message: '알람 내용'
         },{
             type: 'minimalist',
             delay: 5000,
             icon_type: 'image',
             template:
             '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-" role="alert">' +
             '<img data-notify="icon" class="img-circle pull-left">' +
             '<span data-notify="title"></span>' +
             '<span data-notify="message"></span>' +
             '</div>'
         });
 <- 실행시킬 함수 끝 ->
Tip) 저의 경우는 SockJS 에서 요청을 받았을때 사용했기 때문에 onConnect() 함수 안에 사용했습니다.
 
custom.css
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.alert-minimalist {
    background-color: rgb(241, 242, 240);
    border-color: rgba(149, 149, 149, 0.3);
    border-radius: 3px;
    color: rgb(149, 149, 149);
    padding: 10px;
}
.alert-minimalist > [data-notify="icon"] {
    height: 50px;
    margin-right: 12px;
}
.alert-minimalist > [data-notify="title"] {
    color: rgb(51, 51, 51);
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.alert-minimalist > [data-notify="message"] {
    font-size: 80%;
}

 

작성에 참고한 내용

기본 템플릿 설정
Bootrstrap Notify는 데이터 속성 ( data-notify)을 사용 하여 컨텐트를 알림 템플리트에 배치합니다.

 

container: 통지 요소의 컨테이너
dismiss: 사용자가 수동으로 알림을 닫을 수있게하는 데 사용되는 요소
icon: 아이콘 이미지 용 클래스를 갖거나 HTML 이미지 태그를 생성합니다.
title: 알림이 제목을 삽입 할 요소
message: 알림 메시지를 삽입 할 요소
progressbar: 진행률 표시 줄을 나타내는 데 사용되는 요소입니다.
url: URL이 전달되면 href가 설정된 요소입니다.

 

버전 3 이상에서는 template setting데이터 속성과 C # string.format like 함수를 조합 하여 알림 내 콘텐츠를 제어하도록 수정되었습니다 .

{0} = 유형

{1} = 제목
{2} = 메시지
{3} = url
{4} = target

 

동작 화면