PNotify - 고도로 사용자 정의 가능한 통지 플러그인
끊임없이 바쁜 우리 중 일부는 알림을 통해 모든 중요한 이벤트, 뉴스 비트 및 정보를 최상으로 유지합니다. 대기 시간을 줄이는 동시에 최신 소식을 알려주고 있으며 데스크톱 및 휴대 전화에서도 알림을받을 수 있습니다..
그러나 사이트에 대한 알림을 생성하려는 경우이 플러그인 인 PNotify를 사용하여 쉽게 만들 수 있습니다. 그것은 옵션이 많은 무료 및 오픈 소스 자바 스크립트 플러그인이며 사용하기 쉽습니다. PNotify를 사용하면 한 번에 최대 1000 개의 알림을 표시 할 수도 있습니다 (이 벤치마킹 테스트를 참조하십시오). 얼마나 차가워 요??
왜 PNotify를 사용 하는가??
이전에 Pines Notify로 알려진 PNotify는 세 가지 주요 알림 유형을 전달합니다. 정보, 주의 과 오류. 그것은 많은 기능, 효과, 테마 및 스타일을 가지고 있습니다. Bootstrap, jQuery UI, Font Awesome에서 다른 스타일을 선택하거나 자신 만의 스타일로 이동할 수 있습니다. 선택할 수있는 18 가지 기성 테마 (Bootswatch로 제작 됨)가 있으며 전환 효과도 있습니다..
PNotify의 멋진 점은 멋진 그래픽 기능뿐만 아니라 강력하고 풍부한 API (또는 모듈)로도 풍부 해 졌기 때문입니다. 이러한 API에는 웹 알림 초안 표준을 기반으로하는 데스크톱 알림, 동적 업데이트 지원, 다양한 이벤트에 대한 콜백, 제목 및 본문에서 이전 알림 및 HTML 지원을 볼 수있는 기록 뷰어가 포함됩니다.
PNotify ~을 제공하다 눈에 띄지 않는 알림 즉, 통지 뒤에있는 요소를 클릭하지 않고 클릭 할 수 있습니다. 상단 / 하단 막대 스타일 또는 툴팁으로도 모든 위치에 알림을 배치 할 수있는 스택 기능을 사용하여 알림이 표시되는 위치를 결정할 수 있습니다.
기본 사용법
PNotify의 소스는 사용자 정의 가능한 번들 모듈로 제공되며 여기에서 사용할 수 있습니다..
시작하기
소스를 얻은 후 HTML에 다음과 같이 소스를 포함 시키십시오.
PNotify는 사용하기가 매우 쉽습니다. 다음은 간단한 알림입니다.
$ (function () 새로운 PNotify (제목 : '간단한 알림', 텍스트 : '이봐, 나 간단한 알림.'););
그리고 이것이 결과입니다.
기본적으로 알림을 생성하려면 새로운 PNotify 기능을 시작하십시오. 제목, 텍스트, 스타일 및 기타 옵션을 함수 내에서 전달할 수 있습니다. 알림 유형을 지정하지 않으면 기본 유형 인 a 주의. 거기에 대해 20 개 이상의 구성 가능한 옵션 너는 지나칠 수있어. 기본값을 사용하여 목록을 보려면 여기를 클릭하십시오..
스타일링
스타일을 변경하려면 스타일링 옵션을 선택하고 원하는 스타일을 정의하십시오. 사용 가능한 스타일은 부트 스트랩 2, 부트 스트랩 3, jqueryui 과 폰트 솜. 잊지 마라. 관련 스타일 소스 포함 프로젝트 내에서.
예를 들어 이전 알림 스타일을 jQuery UI 테마로 변경하려면 다음 스 니펫을 사용합니다.
새로운 PNotify (title : "jQuery UI Style", 텍스트 : "이봐 요, jQuery UI 테마로 스타일이 지정되었습니다.", 스타일 : "jqueryui");
이 코드를 통해 알림을 스타일링하는 또 다른 방법은 다음과 같습니다.
PNotify.prototype.options.styling = "jqueryui";
변화 jqueryui 원하는 스타일로 다음과 같이 알림 앞에이 줄을 넣으십시오.
PNotify.prototype.options.styling = "jqueryui"; 새로운 PNotify (title : "jQuery UI Style", 텍스트 : "이봐, 나는 jQuery UI 테마로 스타일을 지정했다.");
결과는 다음과 같습니다.
모듈 추가하기
모듈은 고급 알림 기능을 사용할 수있는 풍부한 API입니다. 있다 7 모듈 PNotify : 데스크탑, 버튼, 비 차단, 확인, 내역, 콜백 및 참조 모듈. 적절한 옵션을 알림에 전달하여 모듈을 사용할 수 있습니다..
예를 들어, 데스크탑 모듈을 사용하는 방법을 보여주는 코드는 다음과 같습니다.
PNotify.desktop.permission (); 새로운 PNotify (title : '바탕 화면 알림', 텍스트 : '바탕 화면 알림'입니다. 나에게 내가 허용하는 권한을 부여해야합니다. 그렇지 않은 경우 정기적으로 알림을받습니다. ', 바탕 화면 : 바탕 화면 : true, 아이콘 : null);
PNotify.desktop.permission (); 사용자가 주어진 허가 사이트에서 알림을 표시합니다. 사용자가 사이트를 허용하지 않으면 알림은 일정한 고지로 보여지는 대신에.
보시다시피, 추가 옵션이 있습니다. 데스크톱 코드에. 그만큼 desktop : true 데스크톱에 대한 알림을 활성화합니다. false로 설정하면 알림이 일반 알림이됩니다..
또한 사용자 정의 아이콘을 상 선택권. 그것을 당신의 아이콘 url로 채우십시오; 너는 그것을 설정할 수있다. 그릇된 아이콘을 비활성화하십시오. 다음과 같이 설정하면 없는, 기본 아이콘이 사용됩니다..
옵션이있는 다른 모듈 구현을 보려면이 링크로 이동하십시오..
공식 사이트로 이동하여 구현을 더 진행할 수 있습니다. 거기에서 데모와 함께 몇 가지 고급 사용법을 볼 수 있습니다. 또는 GitHub 페이지에서 추가 정보를 확인할 수 있습니다..
