bbgo 문서

바쁘고 귀찮은 개발자들을 위한 기능들을 추가하고자 노력하는 bbgo에서는 안드로이드 스타일의 토스트 팝업을 지원합니다. 즉, 사용하면 일정시간동안 메세지를 보여준 후 자동으로 사라집니다. 아래 그림처럼 안내 메세지 등을 표현할 때 사용해 보세요.

토스트는 bbgo에 존재하는 모든 JavaScript 파일에서 아래처럼 한 줄을 추가하는 것만으로 간편하게 사용할 수 있습니다.

toast("Hello, World!", 1000);

토스트의 첫 번째 인자는 출력할 메세지, 두 번째는 사라지기 전까지 보여줄 시간(ms)입니다. 위의 예는 "Hello, World!를 1초동안 보여준 후 사라지겠죠? 두 번째 인자는 생략 가능한데 이 경우 기본값인 1.5초가 대신 사용됩니다.

토스트 고쳐 쓰기

오픈소스이므로 이 토스트의 스타일이나 기능도 마음대로 고쳐쓸 수 있습니다.

스타일을 변경하려면 haru.css 파일의 /* toast */ 주석을 참고해 고치면 되고,

/* toast */
#popup_overlay {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.5);
    z-index:99998;
}
#toast_popup {
    position:fixed;
    width:270px;
    top:70%;
    left:50%;
    margin-left:-135px;
    margin-top:0;
    padding:.2em;
    background-color:#444;
    color:#eee;
    z-index:99999;
    font-size:1.3em;
    text-align:center;
    border-radius:7px;
}

기능을 변경하려면, /static/js/thirdparty/toast.js 를 수정하면 됩니다.

function toast(message, delay=1500) {
    var remove_toast = function(){
        $('#toast_popup').remove();
        $('#popup_overlay').remove();
    };
    remove_toast();
    $('body').append('<div id="popup_overlay"></div><div id="toast_popup"></div></div>');
    $('#toast_popup').click(remove_toast);
    $('#toast_popup').html(message).show().delay(delay).fadeOut(300, remove_toast);
}

본인만의 스타일로 토스트를 사용해 보세요!