PNotify - Plugin Pemberitahuan Sangat Diperibadikan
Bagi sesetengah daripada kita yang sentiasa sibuk, pemberitahuan membuat kami berada di puncak setiap peristiwa penting, berita dan maklumat. Ia mengurangkan masa tunggu semasa menguruskan untuk mengemas kini kami dengan kejadian terbaru, dan tidak hairanlah kami mendapat notifikasi di desktop dan telefon bimbit sama.
Jika bagaimanapun anda mahu membuat pemberitahuan untuk tapak anda, anda boleh menciptanya dengan mudah dengan plugin ini dipanggil PNotify. Ia adalah plugin javascript sumber terbuka dan terbuka dengan banyak pilihan dan mudah digunakan. Dengan PNotify, anda juga boleh menunjukkan sehingga 1000 pemberitahuan sekaligus (lihat ujian penanda aras ini untuk mencubanya). Betapa sejuknya itu?
Kenapa Gunakan PNotify?
PNotify, dahulunya dikenali sebagai Pines Notify membawa tiga jenis pemberitahuan utama: info, notis dan kesilapan. Ia mempunyai banyak ciri, kesan, tema dan juga gaya. Anda boleh memilih gaya yang berbeza dari Bootstrap, jQuery UI, Font Awesome atau pergi dengan gaya anda sendiri. Terdapat juga kira-kira 18 tema buatan (dibuat dengan Bootswatch) yang boleh anda pilih dan ada juga kesan peralihan.
Perkara yang menarik mengenai PNotify ialah bukan hanya mempunyai ciri-ciri grafis yang hebat tetapi ia juga diperkaya dengan API yang kuat dan kaya (atau modul). API ini termasuk pemberitahuan desktop (berdasarkan standard Draf Pemberitahuan Web), sokongan kemas kini dinamik, panggilan balik untuk pelbagai peristiwa, penonton sejarah untuk melihat pemberitahuan sebelumnya dan sokongan HTML dalam tajuk dan badan.
PNotify menyediakan pemberitahuan tidak mengganggu yang bermaksud anda boleh mengklik mana-mana elemen di belakang notis itu tanpa menolaknya. Anda juga boleh menentukan di mana pemberitahuan muncul dengan ciri-ciri Stack, yang membolehkan anda meletakkan kedudukan notis di mana-mana: sebagai gaya bar atas / bawah atau bahkan sebagai tooltip.
Penggunaan Asas
Sumber PNotify datang dalam modul paket yang disesuaikan dan boleh didapati di sini.
Bermula
Setelah mendapat sumber, masukkannya ke dalam HTML anda seperti:
PNotify sangat mudah digunakan. Berikut adalah pemberitahuan mudah:
$ (function () new PNotify (title: 'Pemberitahuan Mudah', teks: 'Hei, saya adalah pemberitahuan yang mudah.'););
Dan inilah hasilnya:
Pada asasnya, untuk membuat pemberitahuan anda memulakan fungsi PNotify baru. Tajuk, teks, gaya dan pilihan lain kemudiannya boleh diluluskan di dalam fungsi tersebut. Sekiranya anda tidak menentukan jenis pemberitahuan, ia akan menggunakan jenis lalai yang merupakan notis. Terdapat kira-kira 20+ pilihan boleh dikonfigurasikan anda boleh lulus. Untuk melihat senarai dengan nilai lalainya, klik di sini.
Penggayaan
Untuk menukar gaya, anda boleh lulus gaya pilihan dalam pemberitahuan itu dan tentukan gaya yang anda inginkan. Gaya yang ada adalah bootstrap2, bootstrap3, jqueryui dan fontawesome. Jangan lupa termasuk sumber gaya yang berkaitan dalam projek anda.
Contohnya, jika saya mahu menukar gaya pemberitahuan sebelumnya kepada tema jQuery UI, saya menggunakan coretan berikut:
baru PNotify (title: "jQuery UI Style", text: "Hey, I'm styled with jQuery UI theme.", styling: "jqueryui");
Terdapat cara lain untuk menyusun notifikasi anda, melalui kod ini:
PNotify.prototype.options.styling = "jqueryui";
Ubah jqueryui dengan gaya yang anda mahu, kemudian letakkan baris ini sebelum pemberitahuan seperti:
PNotify.prototype.options.styling = "jqueryui"; baru PNotify (title: "Style UI jQuery", teks: "Hei, saya bergaya dengan tema UI jQuery.");
Inilah hasil anda, digayakan:
Menambah Modul
Modul adalah API kaya yang membolehkan ciri pemberitahuan maju. Disana ada 7 modul dalam PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks and Module Rujukan. Modul boleh digunakan dengan meluluskan pilihan yang sesuai ke dalam pemberitahuan.
Sebagai contoh, di bawah adalah kod untuk menunjukkan kepada anda cara menggunakan Modul Desktop:
PNotify.desktop.permission (); baru PNotify (title: 'Pemberitahuan Desktop', teks: 'Saya \' m notifikasi desktop.Anda perlu memberi izin saya supaya saya dapat muncul sebagai apa saya \ 'semula.Jika tidak, saya akan menjadi pemberitahuan biasa. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); digunakan untuk memastikan pengguna mempunyai diberi kebenaran untuk laman web ini untuk menunjukkan pemberitahuan. Jika pengguna tidak membenarkan tapak tersebut, pemberitahuan itu akan menjadi ditunjukkan sebagai notis biasa sebaliknya.
Seperti yang anda lihat, terdapat pilihan tambahan untuk menambah desktop kepada kod. The desktop: true akan membolehkan pemberitahuan untuk desktop; jika anda menetapkannya kepada palsu, pemberitahuan itu akan menjadi notis biasa.
Anda juga boleh menggunakan ikon tersuai melalui ikon pilihan. Isikan dengan url ikon anda; anda boleh menetapkannya salah untuk melumpuhkan ikon. Jika anda menetapkannya dengan null, ikon lalai akan digunakan.
Untuk melihat pelaksanaan modul lain dengan pilihan mereka, pergi ke pautan ini.
Anda boleh meneruskan pelaksanaan dengan pergi ke laman web rasminya. Di sana anda dapat melihat penggunaan lanjutan bersama dengan demo. Sebagai alternatif, anda boleh melawat halaman GitHubnya untuk maklumat tambahan.
