PNotify - Plugin Notifikasi yang Sangat Dapat Disesuaikan
Bagi sebagian dari kita yang selalu sibuk, pemberitahuan membuat kita selalu tahu tentang setiap peristiwa penting, berita dan informasi. Ini mengurangi waktu tunggu sambil mengelola untuk memperbarui kami dengan kejadian terbaru, dan tidak heran kami mendapat pemberitahuan di desktop dan ponsel..
Namun jika Anda ingin membuat pemberitahuan untuk situs Anda, Anda dapat membuatnya dengan mudah dengan plugin ini bernama PNotify. Ini adalah plugin javascript sumber terbuka dan gratis dengan banyak opsi dan mudah digunakan. Dengan PNotify, Anda bahkan dapat menampilkan hingga 1000 notifikasi sekaligus (lihat tes pembandingan ini untuk mencobanya). Betapa kerennya itu?
Mengapa Menggunakan PNotify?
PNotify, sebelumnya dikenal sebagai Pines Notify membawa tiga jenis pemberitahuan utama: info, melihat dan kesalahan. Ini memiliki banyak fitur, efek, tema dan juga gaya. Anda dapat memilih gaya yang berbeda dari Bootstrap, UI jQuery, Font Awesome atau ikuti gaya Anda sendiri. Ada juga sekitar 18 tema siap pakai (dibuat dengan Bootswatch) yang dapat Anda pilih dan bahkan ada efek transisi.
Hal yang hebat tentang PNotify adalah tidak hanya memiliki fitur grafis yang luar biasa tetapi juga diperkaya dengan API (atau modul) yang kuat dan kaya. API ini mencakup pemberitahuan desktop (berdasarkan standar Draf Pemberitahuan Web), dukungan pembaruan dinamis, panggilan balik untuk berbagai acara, penampil riwayat untuk melihat pemberitahuan sebelumnya dan dukungan HTML dalam judul dan isi.
PNotifikasi menyediakan sebuah pemberitahuan tidak mengganggu yang berarti Anda dapat mengklik elemen apa pun di balik pemberitahuan tanpa mengabaikannya. Anda juga dapat menentukan di mana notifikasi muncul dengan fitur Stacks, yang memungkinkan Anda untuk memposisikan pemberitahuan di mana-mana: sebagai gaya bar atas / bawah atau bahkan sebagai tooltip.
Penggunaan Dasar
Sumber PNotify datang dalam modul bundel yang dapat disesuaikan dan tersedia di sini.
Mulai
Setelah Anda mendapatkan sumbernya, masukkan mereka ke dalam HTML Anda seperti:
PNotify sangat mudah digunakan. Ini pemberitahuan sederhana:
$ (function () PNotify baru (judul: 'Pemberitahuan Sederhana', teks: 'Hai, saya pemberitahuan sederhana.'););
Dan inilah hasilnya:
Pada dasarnya, untuk membuat pemberitahuan Anda memulai fungsi PNotify baru. Judul, teks, gaya, dan opsi lain kemudian dapat dilewatkan di dalam fungsi. Jika Anda tidak menentukan jenis pemberitahuan, itu akan menggunakan jenis default yaitu a melihat. Ada sekitar 20+ opsi yang dapat dikonfigurasi kamu bisa lulus. Untuk melihat daftar dengan nilai defaultnya, klik di sini.
Styling
Untuk mengubah gaya, Anda dapat melewati styling di pemberitahuan dan tentukan gaya yang Anda inginkan. Gaya yang tersedia adalah bootstrap2, bootstrap3, jqueryui dan fontawesome. Jangan lupa termasuk sumber gaya terkait dalam proyek Anda.
Misalnya, jika saya ingin mengubah gaya pemberitahuan sebelumnya menjadi tema UI jQuery, saya menggunakan cuplikan berikut:
PNotify baru (judul: "Gaya jQuery UI", teks: "Hei, saya ditata dengan tema jQuery UI.", styling: "jqueryui");
Ada cara lain untuk mengatur pemberitahuan Anda, melalui kode ini:
PNotify.prototype.options.styling = "jqueryui";
Perubahan jqueryui dengan gaya yang Anda inginkan, lalu letakkan baris ini di depan notifikasi seperti:
PNotify.prototype.options.styling = "jqueryui"; PNotify baru (judul: "Gaya jQuery UI", teks: "Hei, saya ditata dengan tema jQuery UI.");
Inilah hasil Anda, ditata:
Menambahkan Modul
Modul adalah API kaya yang mengaktifkan fitur pemberitahuan lanjut. Ada 7 modul dalam PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks dan Reference Module. Modul dapat digunakan dengan mengirimkan opsi yang sesuai ke notifikasi.
Sebagai contoh, di bawah ini adalah kode untuk menunjukkan kepada Anda bagaimana menggunakan Modul Desktop:
PNotify.desktop.permission (); PNotify baru (judul: 'Pemberitahuan Desktop', teks: 'Saya pemberitahuan desktop. Anda perlu memberi saya izin agar saya dapat tampil seperti yang saya inginkan. Jika tidak, saya akan menjadi pemberitahuan reguler. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); digunakan untuk memastikan pengguna memiliki diberi izin agar situs menampilkan pemberitahuan. Jika pengguna melarang situs, notifikasi akan ditampilkan sebagai pemberitahuan rutin sebagai gantinya.
Seperti yang Anda lihat, ada opsi tambahan untuk menambahkan Desktop ke kode. Itu desktop: benar akan mengaktifkan notifikasi untuk desktop; jika Anda menjadikannya false, notifikasi akan menjadi pemberitahuan reguler.
Anda juga dapat menggunakan ikon khusus melalui ikon pilihan. Isi dengan url ikon Anda; Anda bisa mengaturnya Salah untuk menonaktifkan ikon. Jika Anda mengaturnya dengan batal, ikon default akan digunakan.
Untuk melihat implementasi modul lainnya dengan opsinya, buka tautan ini.
Anda dapat melanjutkan implementasinya dengan mengunjungi situs resminya. Di sana Anda dapat melihat beberapa penggunaan lanjutan bersama dengan demo. Atau, Anda dapat mengunjungi halaman GitHub untuk info tambahan.
