PNotify - ปลั๊กอินการแจ้งเตือนที่ปรับแต่งได้สูง
สำหรับพวกเราบางคนที่ยุ่งตลอดเวลาการแจ้งเตือนทำให้เราอยู่เหนือเหตุการณ์สำคัญข่าวและข้อมูลทุกอย่าง มันลดเวลาการรอในขณะที่จัดการเพื่ออัปเดตเราด้วยเหตุการณ์ล่าสุดและไม่น่าแปลกใจที่เราได้รับการแจ้งเตือนบนเดสก์ท็อปและโทรศัพท์มือถือเหมือนกัน.
อย่างไรก็ตามหากคุณต้องการสร้างการแจ้งเตือนสำหรับเว็บไซต์ของคุณคุณสามารถสร้างได้อย่างง่ายดายด้วยปลั๊กอินนี้ชื่อ PNotify มันเป็นปลั๊กอิน javascript ฟรีและโอเพ่นซอร์สที่มีตัวเลือกมากมายและใช้งานง่าย ด้วย PNotify คุณสามารถแสดงการแจ้งเตือนได้มากถึง 1,000 รายการพร้อมกัน (ดูการทดสอบการเปรียบเทียบเพื่อลองดู) เท่ห์แค่ไหน?
ทำไมต้องใช้ PNotify?
PNotify เดิมชื่อ Pines Notify มีการแจ้งเตือนหลักสามประเภท: ข้อมูล, แจ้งให้ทราบ และ ความผิดพลาด. มีพวงของคุณสมบัติลักษณะพิเศษชุดรูปแบบและลักษณะ คุณสามารถเลือกสไตล์ที่แตกต่างจาก Bootstrap, jQuery UI, Font Awesome หรือไปกับสไตล์ของคุณเอง นอกจากนี้ยังมีธีมสำเร็จรูปอีกประมาณ 18 ธีม (สร้างด้วย Bootswatch) ที่คุณสามารถเลือกได้และยังมีเอฟเฟกต์การเปลี่ยนแปลง.
สิ่งที่ยอดเยี่ยมเกี่ยวกับ PNotify คือมันไม่ได้มีเพียงคุณสมบัติกราฟิกที่ยอดเยี่ยม แต่ยังได้รับการเสริมประสิทธิภาพด้วย API ที่ทรงพลังและสมบูรณ์ (หรือโมดูล) API เหล่านี้รวมถึงการแจ้งเตือนทางเดสก์ท็อป (ขึ้นอยู่กับมาตรฐาน Web Notifications Draft), การสนับสนุนการอัปเดตแบบไดนามิก, การเรียกกลับสำหรับกิจกรรมต่างๆ, โปรแกรมดูประวัติเพื่อดูการแจ้งเตือนก่อนหน้าและการสนับสนุน HTML ในหัวเรื่องและเนื้อหา.
PNotify ให้ การแจ้งเตือนไม่สร้างความรำคาญ ซึ่งหมายความว่าคุณสามารถคลิกผ่านองค์ประกอบใด ๆ ที่อยู่เบื้องหลังการแจ้งเตือนได้โดยไม่ต้องยกเลิก นอกจากนี้คุณยังสามารถกำหนดว่าการแจ้งเตือนจะปรากฏที่ใดด้วยฟีเจอร์ Stacks ซึ่งช่วยให้คุณวางตำแหน่งการแจ้งเตือนได้ทุกที่: เป็นสไตล์แถบด้านบน / ล่างหรือแม้กระทั่งเป็นคำแนะนำเครื่องมือ.
การใช้งานพื้นฐาน
แหล่งที่มาของ PNotify มาในโมดูลบันเดิลที่ปรับแต่งได้และมีให้ที่นี่.
เริ่มต้นใช้งาน
หลังจากที่คุณมีแหล่งข้อมูลให้รวมไว้ใน HTML ดังนี้:
PNotify ใช้งานง่ายมาก นี่คือการแจ้งเตือนง่ายๆ
$ (ฟังก์ชั่น () PNotify ใหม่ (ชื่อ: 'การแจ้งเตือนแบบง่าย', ข้อความ: 'สวัสดีฉันกำลังแจ้งเตือนแบบง่าย');));
และนี่คือผลลัพธ์ที่ได้:
โดยทั่วไปในการสร้างการแจ้งเตือนคุณจะเริ่มต้นฟังก์ชั่น PNotify ใหม่ ชื่อเรื่องข้อความลักษณะและตัวเลือกอื่น ๆ นั้นสามารถส่งผ่านภายในฟังก์ชั่น หากคุณไม่ได้ระบุประเภทการแจ้งเตือนมันจะใช้ประเภทเริ่มต้นซึ่งเป็น แจ้งให้ทราบ. มีประมาณ ตัวเลือกที่กำหนดได้มากกว่า 20 รายการ คุณสามารถผ่าน หากต้องการดูรายการที่มีค่าเริ่มต้นคลิกที่นี่.
การออกแบบ
ในการเปลี่ยนสไตล์คุณสามารถผ่าน การออกแบบ ตัวเลือกในการแจ้งเตือนและกำหนดสไตล์ที่คุณต้องการ มีสไตล์ให้เลือก bootstrap2, bootstrap3, jQueryUI และ fontawesome. อย่าลืม รวมแหล่งที่มาของสไตล์ที่เกี่ยวข้อง ภายในโครงการของคุณ.
ตัวอย่างเช่นหากฉันต้องการเปลี่ยนสไตล์การแจ้งเตือนก่อนหน้านี้เป็นธีม jQuery UI ฉันจะใช้ข้อมูลโค้ดต่อไปนี้:
ใหม่ PNotify (หัวเรื่อง: "jQuery UI Style", ข้อความ: "เฮ้ฉันมีสไตล์ด้วยธีม jQuery UI", ใส่สไตล์: "jqueryui");
มีอีกวิธีหนึ่งในการจัดสไตล์การแจ้งเตือนของคุณผ่านรหัสนี้:
PNotify.prototype.options.styling = "jqueryui";
เปลี่ยนแปลง jQueryUI ตามสไตล์ที่คุณต้องการจากนั้นให้วางบรรทัดนี้ไว้ข้างหน้าการแจ้งเตือนดังนี้:
PNotify.prototype.options.styling = "jqueryui"; ใหม่ PNotify (หัวเรื่อง: "jQuery UI Style", ข้อความ: "เฮ้ฉันมีสไตล์ด้วยชุดรูปแบบ jQuery UI");
นี่คือผลลัพธ์ของคุณสไตล์:
การเพิ่มโมดูล
โมดูลเป็น API ที่สมบูรณ์ซึ่งเปิดใช้งานคุณลักษณะการแจ้งเตือนขั้นสูง มี 7 โมดูล ใน PNotify: เดสก์ท็อป, ปุ่ม, NonBlock, ยืนยัน, ประวัติ, การโทรกลับและโมดูลอ้างอิง โมดูลสามารถนำมาใช้โดยการส่งตัวเลือกที่เหมาะสมลงในการแจ้งเตือน.
ดังตัวอย่างด้านล่างคือรหัสที่จะแสดงวิธีใช้โมดูลเดสก์ท็อป:
PNotify.desktop.permission (); ใหม่ PNotify (ชื่อ: 'การแจ้งเตือนทางเดสก์ท็อป', ข้อความ: 'I \' การแจ้งเตือนทางเดสก์ท็อปคุณต้องให้สิทธิ์ฉันเพื่อที่ฉันจะได้ปรากฏเป็นสิ่งที่ฉันต้องการถ้าไม่ฉันจะกลายเป็นการแจ้งเตือนปกติ ', เดสก์ท็อป: เดสก์ท็อป: จริง, ไอคอน: null);
PNotify.desktop.permission (); ใช้เพื่อให้แน่ใจว่าผู้ใช้มี ได้รับอนุญาต เพื่อให้เว็บไซต์แสดงการแจ้งเตือน หากผู้ใช้ไม่อนุญาตเว็บไซต์การแจ้งเตือนจะเป็น แสดงเป็นประกาศปกติ แทน.
อย่างที่คุณเห็นมีตัวเลือกเพิ่มเติมในการเพิ่ม เดสก์ทอป รหัส เดสก์ท็อป: จริง จะเปิดใช้งานการแจ้งเตือนสำหรับเดสก์ท็อป หากคุณตั้งค่าเป็นเท็จการแจ้งเตือนจะกลายเป็นการแจ้งเตือนปกติ.
คุณอาจใช้ไอคอนที่กำหนดเองผ่านทาง ไอคอน ตัวเลือก เติมด้วย url ไอคอนของคุณ; คุณสามารถตั้งค่า เท็จ เพื่อปิดการใช้งานไอคอน หากคุณตั้งไว้ด้วย โมฆะ, ไอคอนเริ่มต้นจะถูกใช้.
หากต้องการดูการนำโมดูลไปใช้งานพร้อมตัวเลือกให้ไปที่ลิงก์นี้.
คุณสามารถดำเนินการต่อไปได้โดยไปที่เว็บไซต์ทางการ ที่นั่นคุณสามารถเห็นการใช้งานขั้นสูงพร้อมกับการสาธิต หรือคุณสามารถไปที่หน้า GitHub เพื่อรับข้อมูลเพิ่มเติม.
