adsense4


웹 사이트 구축할 때 유용한 플로팅 메시지창 라이브러리 - notifIt open source

이런 라이브러리는 다양한 곳에서 사용 될 수 있을 것 같습니다.

웹사이트를 보고 있는 사용자에게 정보를 메시지창을 이해 보여 주고 싶은 경우가 많이 있습니다. 예를 들어 오류 메시지 같은 경우가 되겠죠. Ajax로 오류 메시지를 받아서 보여주고 싶은 경우 대부분 alert()를 사용하는 경우가 많지 않을까요.

이런 경우에 플로팅 형태로 메시지 창에 대해 상대 위치를 지정하여 사용자가 항상 볼 수 있는 장소에 표시가 가능한 라이브러리가 notifIt입니다.

사용 방법을 소개 합니다. 가장 간단한 기본적인 예입니다. 
notif({
  msg: "Success: In 5 seconds i'll be gone",
type: "success"
});
이렇게 하면 다음과 같이 표시 됩니다.
기본값으로 우측 상단에 표시 되며 5초 후에 사라집니다.

notif({
  msg: "Oops! A wild error appeared!",
type: "error",
position: "center"
});
position 항목을 추가해서 위치를 지정할 수 있습니다.
위의 예제 코드는 화면 가운데에 빨간 메시지 창(type이 오류)이 보여졌다 사라집니다.

notif({
  type: "info",
msg: "Info: Some info here.",
width: "all",
height: 100,
position: "center"
});
메시지 창의 폭(width)과 높이(height)를 지정할 수 있습니다.
폭을 "all"로 지정한 예입니다. 

notif({
  type: "error",
msg: "This error will stay here until you click it.",
position: "center",
width: 500,
height: 60,
autohide: false
});
autohide는 기본값이 true입니다만, false로 지정하면 사라지지 않는 메시지 창이 표시 됩니다. 메시지 창을 클릭해야만 사라집니다. 


이외에도 다양한 옵션을 제공하는 것을 테스트 하며 확인 해 볼 수 있습니다.
참고로 jQuery기반의 라이브러리입니다.

naoxink.hol.es/notifIt/ 
소스 : naoxink/notifIt 

라이센스는 MIT License입니다.






 

통계 위젯 (화이트)

414
74
402033

160x600스크래퍼

네이버Analysis