PNotify - البرنامج المساعد إعلام عالية للتخصيص

بالنسبة إلى البعض منا الذين ينشغلون باستمرار ، فإن الإخطارات تبقينا على قمة كل الأحداث المهمة والأخبار والمعلومات. إنه يقلل من وقت الانتظار أثناء التمكن من تحديثنا بأحدث الأحداث ، ولا عجب في أن نتلقى إعلامات على أجهزة سطح المكتب والهواتف المحمولة على حد سواء.

إذا كنت ترغب في إنشاء إشعار لموقعك ، فيمكنك إنشاؤه بسهولة باستخدام هذا المكون الإضافي المسمى PNotify. إنه مكوّن إضافي مجاني ومفتوح javascript مع الكثير من الخيارات ، وهو سهل الاستخدام. باستخدام PNotify ، يمكنك حتى عرض ما يصل إلى 1000 إشعار في وقت واحد (انظر اختبار القياس هذا لتجربته). كم ذلك رائع?

لماذا استخدام PNotify?

يحمل PNotify ، المعروف سابقًا باسم Pines Notify ، ثلاثة أنواع من الإشعارات الرئيسية: معلومات, تنويه و خطأ. لديه مجموعة من الميزات ، والآثار ، والموضوعات ، وكذلك الأنماط. يمكنك اختيار أنماط مختلفة من Bootstrap أو jQuery UI أو Font Awesome أو الانتقال بأسلوبك الخاص. هناك أيضًا حوالي 18 سمة جاهزة (مصنوعة من Bootswatch) يمكنك الاختيار من بينها ، وهناك أيضًا تأثيرات انتقالية.

إن الشيء العظيم في PNotify هو أنه لا يحتوي على ميزات رسومية رائعة فحسب ، بل إنه غني أيضًا بواجهات برمجة تطبيقات قوية وغنية (أو وحدات). تتضمن واجهات برمجة التطبيقات هذه إعلامات سطح المكتب (استنادًا إلى معيار مسودة إعلامات الويب) ، ودعم التحديث الديناميكي ، واسترجاعات الأحداث المختلفة ، وعارض السجل ، لمشاهدة الإخطارات السابقة ودعم HTML في العنوان والنص..

PNotify يوفر إشعار غير مزعجة مما يعني أنه يمكنك النقر فوق أي عنصر خلف الإشعار دون رفضه. يمكنك أيضًا تحديد مكان ظهور الإشعار باستخدام ميزات Stacks ، والتي تتيح لك إمكانية وضع الإشعار في كل مكان: كنمط شريط علوي / سفلي أو حتى تلميح أدوات.

الاستخدام الأساسي

تأتي مصادر PNotify في وحدات حزمة قابلة للتخصيص ومتاحة هنا.

ابدء

بعد حصولك على المصادر ، قم بتضمينها في HTML كما يلي:

PNotify سهل الاستخدام. إليك إشعار بسيط:

 $ (function () new PNotify (title: 'Simple Notification' ، النص: 'مهلا ، أنا إشعار بسيط.')؛)) 

وهذه هي النتيجة:

بشكل أساسي ، لإنشاء إشعار ، تقوم ببدء تشغيل وظيفة PNotify جديدة. يمكن بعد ذلك تمرير العنوان والنص والأسلوب والخيارات الأخرى داخل الوظيفة. إذا لم تحدد نوع الإخطار ، فسيستخدم النوع الافتراضي وهو تنويه. هناك حوالي 20+ خيارات شكلي يمكنك تمرير. لمشاهدة القائمة بقيمتها الافتراضية ، انقر هنا.

تصميم

لتغيير النمط ، يمكنك تمرير تصميم الخيار في الإخطار وتحديد طريقتك المطلوبة. الأساليب المتاحة هي bootstrap2, bootstrap3, jqueryui و fontawesome. لا تنسى ذلك تشمل مصادر النمط ذات الصلة داخل مشروعك.

على سبيل المثال ، إذا أردت تغيير نمط الإشعار السابق إلى سمة jQuery UI ، فإني أستخدم المقتطف التالي:

 new PNotify (title: "jQuery UI Style" ، النص: "مهلا ، أنا على غرار مع jQuery UI theme."، styling: "jqueryui")؛ 

هناك طريقة أخرى لتصميم إخطارك ، من خلال هذا الرمز:

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

يتغيرون jqueryui بالأسلوب الذي تريده ، ثم ضع هذا السطر قبل الإخطار كما يلي:

 PNotify.prototype.options.styling = "jqueryui"؛ new PNotify (title: "jQuery UI Style" ، النص: "مهلا ، أنا على غرار jQuery UI theme.")؛ 

ها هي نتيجتك ، على غرار:

مضيفا وحدات

الوحدات النمطية هي واجهات برمجة التطبيقات الغنية التي تتيح ميزات الإعلام المتقدمة. هناك 7 وحدات في PNotify: سطح المكتب ، أزرار ، عدم الحظر ، تأكيد ، التاريخ ، عمليات الاسترجاعات والوحدة المرجعية. يمكن استخدام الوحدات النمطية عن طريق تمرير خياراتها المناسبة في الإعلام.

على سبيل المثال ، فيما يلي الرموز التي توضح لك كيفية استخدام Desktop Module:

 PNotify.desktop.permission ()؛ جديد PNotify (title: 'Desktop Notification' ، النص: 'I' إعلام سطح المكتب. يجب أن تمنحني إذنًا حتى أتمكن من الظهور ما سأفعله ، إذا لم يكن الأمر كذلك ، فسأصبح إشعارًا منتظمًا. '، desktop: desktop: true، icon: null)؛ 

PNotify.desktop.permission ()؛ يستخدم للتأكد من المستخدمين منح إذن للموقع لإظهار الإخطار. إذا رفض المستخدمون الموقع ، فسيكون الإخطار كما هو مبين إشعار منتظم في حين أن.

كما ترون ، هناك خيار إضافي للإضافة سطح المكتب إلى الرمز. ال سطح المكتب: صحيح سيمكن الإخطار لسطح المكتب. إذا قمت بتعيينه على "خطأ" ، فسيصبح الإشعار إشعارًا منتظمًا.

يمكنك أيضا استخدام رمز مخصص عبر أيقونة اختيار. املأه بعنوان url الخاص بك. يمكنك ضبطه خاطئة لتعطيل الرمز. إذا قمت بتعيينها مع لا شيء, سيتم استخدام الأيقونة الافتراضية.

للاطلاع على تطبيقات الوحدة النمطية الأخرى مع خياراتها ، انتقل إلى هذا الرابط.

يمكنك زيادة التنفيذ بالانتقال إلى موقعها الرسمي. هناك يمكنك أن ترى بعض الاستخدام المتقدم جنبا إلى جنب مع العروض. بدلاً من ذلك ، يمكنك زيارة صفحة جيثب للحصول على معلومات إضافية.