Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[jQuery plugin] 오른쪽 위에 반투명 메세지 박스 띄우는 플러그인 jgrowl

시간이 없어서 사용법을 자세히 소개하진 못하지만, 굉장히 간단하다.

일단 동영상을 보실까.

코드는 아래와 같다. 샘플 1부터 5까지 쉽게 알 수 있다.

// Sample 1 - 그냥 사용하기
$.jGrowl("Hello world!");
// Sample 2 - 안 사라지게 하기
$.jGrowl("Stick this!", { sticky: true });
// Sample 3 - 메세지에 제목 띄우기
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4 - 시간 정하기(아래는 10초)
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5 - 나타나는 애니메이션 설정, 끌 때 실행할 함수 설정(단, 수동으로 끄면 작동하지 않는다.)
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
    beforeClose: function(e,m) {
        alert('About to close this notification!');
    },
    animateOpen: {
        height: 'show'
    }
});

잠깐 살펴 본 바로는 일단 css 파일을 넣어야 한다. 심플하다.

jQuery UI를 함께 사용할 수도 있는 거 같은데 구체적으로는 뭐에 쓰는지 잘 모르겠다.

옵션은 열리는 속도, 최대 몇 개까지의 메세지를 뜨게 허용할 것인지, 사라지게 할 것인지, 사용자가 임의로 끌 때까지 붙여 둘 것인지 등이 있다. 어디에 뜨게 할 것인지 위치도 지정할 수 있다. 트위터를 받아서 뜨게 할 수도 있다.(신기신기)

지금 프로젝트에 적용해 봐야겠다. ㅋㅋㅋ

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (3개)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다