- תוסף הודעה להתאמה אישית

עבור חלק מאיתנו אשר עסוקים כל הזמן, הודעות לשמור אותנו על גבי כל אירוע חשוב, newsbit ומידע. זה מקטין את זמן ההמתנה תוך ניהול לעדכן אותנו עם האירועים האחרונים, וזה לא פלא שאנחנו מקבלים הודעות על שולחנות עבודה ו מוביילים כאחד.

עם זאת, אם ברצונך ליצור התראה עבור האתר שלך, תוכל ליצור אותו בקלות עם הפלאגין שנקרא PNotify. זה חינם וקוד פתוח JavaScript plugin עם המון אפשרויות וזה קל לשימוש. עם PNotify, תוכל אפילו להציג עד 1000 התראות בו-זמנית (עיין במבחן השוואת ביצועים זה כדי לנסות אותו). כמה מגניב זה?

מדוע להשתמש ב- PNotify?

PNotify, המכונה בעבר Pines Notify נושא שלושה סוגים עיקריים של הודעות: מידע, הודעה ו שגיאה. יש לה חבורה של תכונות, אפקטים, נושאים וסגנונות. אתה יכול לבחור סגנונות שונים מ Bootstrap, jQuery ממשק משתמש, גופן Awesome או ללכת עם הסגנון שלך. ישנם גם על 18 נושאים מוכנים (שנעשו עם Bootswatch) אתה יכול לבחור מתוך ויש אפילו תופעות המעבר.

הדבר הגדול על PNotify זה לא רק יש תכונות גרפיות מדהים אבל זה מועשר גם עם APIs חזקים ועשירים (או מודולים). ממשקי API אלה כוללים הודעות שולחן עבודה (על פי תקן טיוטות אינטרנט), תמיכה בעדכונים דינמיים, שיחות חוזרות לאירועים שונים, צופה היסטוריה כדי לראות הודעות קודמות ותמיכה ב- HTML בכותרת ובגוף.

ציין מספק הודעה לא פולשנית מה שאומר שאתה יכול ללחוץ על כל רכיב מאחורי ההודעה מבלי לדחות את זה. ניתן גם לקבוע היכן ההודעה מופיעה עם תכונות Stacks, המאפשרת למקם את ההודעה בכל מקום: כסרגל סרגל עליון / תחתון או אפילו כסרגל כלים.

שימוש בסיסי

מקורות של PNotify לבוא מודולים חבילה להתאמה אישית זמינים כאן.

מתחילים

לאחר שקיבלת את המקורות, הוסף אותם ל- HTML שלך כך:

PNotify הוא קל מאוד לשימוש. הנה הודעה פשוטה:

 $ (פונקציה () חדש PNotify (title: 'הודעה פשוטה', טקסט: 'היי, אני פשוט הודעה.');); 

וזו התוצאה:

ביסודו של דבר, כדי ליצור הודעה לך ליזום פונקציה חדשה PNotify. הכותרת, הטקסט, הסגנון ואפשרויות אחרות יכולים להיות מועברים בתוך הפונקציה. אם לא תציין את סוג ההודעה, היא תשתמש בסוג ברירת המחדל שהוא הודעה. יש בערך 20 + אפשרויות להגדרה אתה יכול לעבור. כדי לראות את הרשימה עם ערך ברירת המחדל שלה, לחץ כאן.

סטיילינג

כדי לשנות את הסגנון, אתה יכול להעביר את סטיילינג אפשרות בהודעה ולהגדיר את הסגנון הרצוי. סגנונות זמינים הם 2, bootstrap3, jqueryui ו fontawesome. אל תשכח כוללים מקורות סגנון קשורים בתוך הפרויקט שלך.

לדוגמה, אם אני רוצה לשנות את סגנון ההתראה הקודם לעיצוב ממשק המשתמש של jQuery, אני משתמש בקטע הבא:

 חדש ("כותרת:" סגנון jQuery UI סגנון ", טקסט:" היי, אני \ 'מנוסח עם הנושא jQuery UI. ", סגנון:" jqueryui "); 

יש דרך נוספת לעצב את הסגנון שלך, באמצעות קוד זה:

 PNotify.prototype.options.styling = "jqueryui"; 

שינוי jqueryui עם הסגנון הרצוי, ולאחר מכן לשים את השורה הזאת לפני ההודעה כך:

 PNotify.prototype.options.styling = "jqueryui"; חדש PNotify (title: "jQuery UI Style", טקסט: "היי, אני \ 'מנוסח עם הנושא jQuery UI."); 

הנה התוצאה שלך, מעוצב:

הוספת מודולים

המודולים הם ממשקי API עשירים שמאפשרים תכונות מתקדמות של התראות. יש 7 מודולים ב PNotify: שולחן עבודה, לחצנים, NonBlock, אישור, היסטוריה, שיחות טלפון מודול התייחסות. ניתן להשתמש במודולים על-ידי העברת האפשרויות המתאימות להודעה.

לדוגמה, להלן הקודים כדי להראות לך כיצד להשתמש מודול שולחן העבודה:

 PNotify.desktop.permission (); חדש ("כותרת:" הודעת שולחן עבודה ", טקסט:" אני \ "אמא הודעה בשולחן העבודה.אתה צריך לתת לי רשות אז אני יכול להופיע כמו מה אני 'אם לא, אני אהיה הודעה קבועה. ', שולחן העבודה: שולחן העבודה: true, icon: null); 

PNotify.desktop.permission (); משמש כדי לוודא שמשתמשים יש באישור כדי להציג את האתר. אם משתמשים לא מאפשרים את האתר, ההודעה תהיה המוצג כהודעה רגילה במקום זאת.

כפי שאתה יכול לראות, יש אפשרות נוספת של הוספת שולחן העבודה אל הקוד. ה שולחן העבודה: נכון יאפשר את ההודעה עבור שולחן העבודה; אם תגדיר אותו כוזב, ההודעה תהפוך להודעה רגילה.

כמו כן, באפשרותך להשתמש בסמל מותאם אישית דרך סמל אפשרות. מלא אותו עם כתובת האתר של הסמל שלך; אתה יכול להגדיר את זה שקר כדי להשבית את הסמל. אם אתה מגדיר את זה ריק, ייעשה שימוש בסמל ברירת המחדל.

כדי לראות יישומים אחרים של המודול עם האפשרויות שלהם, עבור לקישור זה.

אתה יכול להמשיך את היישום על ידי הולך לאתר הרשמי שלה. שם אתה יכול לראות כמה שימוש מתקדם יחד עם הדגמות. לחלופין, תוכל לבקר בדף GitHub לקבלת מידע נוסף.