PNotify - Một plugin thông báo có thể tùy chỉnh cao
Đối với một số người trong chúng ta thường xuyên bận rộn, các thông báo giúp chúng tôi luôn đứng đầu trong mọi sự kiện, bản tin và thông tin quan trọng. Nó làm giảm thời gian chờ đợi trong khi quản lý để cập nhật cho chúng tôi những sự kiện mới nhất và không có gì lạ khi chúng tôi nhận được thông báo trên máy tính để bàn và điện thoại di động..
Tuy nhiên, nếu bạn muốn tạo thông báo cho trang web của mình, bạn có thể tạo thông báo dễ dàng với plugin này có tên là PNotify. Đây là một plugin javascript miễn phí và mã nguồn mở với nhiều tùy chọn và rất dễ sử dụng. Với PNotify, bạn thậm chí có thể hiển thị tối đa 1000 thông báo cùng một lúc (xem bài kiểm tra điểm chuẩn này để dùng thử). Thật tuyệt?
Tại sao nên sử dụng PNotify?
PNotify, trước đây gọi là Pines Notify mang ba loại thông báo chính: thông tin, để ý và lỗi. Nó có một loạt các tính năng, hiệu ứng, chủ đề và cả phong cách. Bạn có thể chọn các kiểu khác nhau từ Bootstrap, jQuery UI, Font Awesome hoặc đi theo phong cách của riêng bạn. Ngoài ra còn có khoảng 18 chủ đề được tạo sẵn (được tạo bằng Bootswatch) mà bạn có thể chọn và thậm chí còn có các hiệu ứng chuyển tiếp.
Điều tuyệt vời về PNotify là nó không chỉ có các tính năng đồ họa tuyệt vời mà còn được làm giàu với các API (hoặc mô-đun) mạnh mẽ và phong phú. Các API này bao gồm thông báo trên màn hình (dựa trên tiêu chuẩn Dự thảo thông báo web), hỗ trợ cập nhật động, gọi lại cho các sự kiện khác nhau, trình xem lịch sử để xem thông báo trước và hỗ trợ HTML trong tiêu đề và nội dung.
PNotify cung cấp một thông báo không phô trương có nghĩa là bạn có thể nhấp qua bất kỳ yếu tố nào đằng sau thông báo mà không cần loại bỏ nó. Bạn cũng có thể xác định nơi thông báo hiển thị với các tính năng Ngăn xếp, cho phép bạn định vị thông báo ở mọi nơi: theo kiểu thanh trên cùng / dưới cùng hoặc thậm chí là một chú giải công cụ.
Cách sử dụng cơ bản
Nguồn của PNotify có các mô đun gói tùy chỉnh và có sẵn tại đây.
Bắt đầu
Sau khi bạn có các nguồn, hãy đưa chúng vào HTML của bạn như sau:
PNotify rất dễ sử dụng. Đây là một thông báo đơn giản:
$ (function () new PNotify (title: 'Thông báo đơn giản', văn bản: 'Này, tôi là một thông báo đơn giản.'););
Và đây là kết quả:
Về cơ bản, để tạo thông báo, bạn bắt đầu một chức năng PNotify mới. Tiêu đề, văn bản, kiểu và các tùy chọn khác sau đó có thể được truyền vào bên trong hàm. Nếu bạn không chỉ định loại thông báo, nó sẽ sử dụng loại mặc định là để ý. Có khoảng Hơn 20 tùy chọn cấu hình bạn có thể vượt qua. Để xem danh sách với giá trị mặc định của nó, bấm vào đây.
Tạo kiểu
Để thay đổi phong cách, bạn có thể vượt qua tạo kiểu tùy chọn trong thông báo và xác định phong cách mong muốn của bạn. Phong cách có sẵn là bootstrap2, bootstrap3, jqueryui và fontawgie. Đừng quên bao gồm các nguồn phong cách liên quan trong dự án của bạn.
Chẳng hạn, nếu tôi muốn thay đổi kiểu thông báo trước đó thành chủ đề UI UI, tôi sử dụng đoạn mã sau:
PNotify mới (title: "jQuery UI Style", văn bản: "Hey, tôi được tạo kiểu với chủ đề UI UI.", kiểu dáng: "jqueryui");
Có một cách khác để định kiểu thông báo của bạn, thông qua mã này:
PNotify.prototype.options.stomme = "jqueryui";
Thay đổi jqueryui với kiểu bạn muốn, sau đó đặt dòng này trước thông báo như sau:
PNotify.prototype.options.stomme = "jqueryui"; PNotify mới (title: "Kiểu giao diện người dùng jQuery", văn bản: "Này, tôi được tạo kiểu với chủ đề giao diện người dùng jQuery.");
Đây là kết quả của bạn, theo kiểu:
Thêm mô-đun
Các mô-đun là các API phong phú cho phép các tính năng thông báo nâng cao. Có 7 mô-đun trong PNotify: Máy tính để bàn, Nút, NonBlock, Xác nhận, Lịch sử, Cuộc gọi lại và Mô-đun tham chiếu. Các mô-đun có thể được sử dụng bằng cách chuyển các tùy chọn thích hợp của nó vào thông báo.
Ví dụ, bên dưới là các mã để chỉ cho bạn cách sử dụng Mô-đun máy tính để bàn:
PNotify.desktop-01 (); PNotify mới (title: 'Thông báo trên màn hình', văn bản: 'Tôi đang thông báo trên màn hình. Bạn cần cho phép tôi để tôi có thể xuất hiện dưới dạng thông báo của tôi. Nếu không, tôi sẽ trở thành thông báo thường xuyên. ', máy tính để bàn: máy tính để bàn: true, icon: null);
PNotify.desktop-01 (); được sử dụng để đảm bảo người dùng có cho phép cho các trang web để hiển thị thông báo. Nếu người dùng không cho phép trang web, thông báo sẽ là hiển thị như một thông báo thường xuyên thay thế.
Như bạn có thể thấy, có thêm tùy chọn thêm máy tính để bàn để mã. Các máy tính để bàn: đúng sẽ kích hoạt thông báo cho máy tính để bàn; nếu bạn đặt thành sai, thông báo sẽ trở thành thông báo thường xuyên.
Bạn cũng có thể sử dụng biểu tượng tùy chỉnh thông qua biểu tượng Tùy chọn. Điền nó với url biểu tượng của bạn; bạn có thể đặt nó sai để tắt biểu tượng. Nếu bạn đặt nó với vô giá trị, biểu tượng mặc định sẽ được sử dụng.
Để xem các triển khai mô-đun khác với các tùy chọn của họ, hãy truy cập liên kết này.
Bạn có thể tiếp tục thực hiện bằng cách đi đến trang web chính thức của nó. Ở đó bạn có thể thấy một số cách sử dụng nâng cao cùng với các bản demo. Ngoài ra, bạn có thể truy cập trang GitHub của nó để biết thêm thông tin.
