PNotify - Έξυπνη προσθήκη προσαρμοσμένης ειδοποίησης

Για κάποιους από εμάς που είναι συνεχώς απασχολημένοι, οι ειδοποιήσεις μας κρατούν στην κορυφή κάθε σημαντικού γεγονότος, ενημερωτικού δελτίου και πληροφοριών. Μειώνει τον χρόνο αναμονής ενώ διαχειρίζεται να μας ενημερώνει με τα τελευταία γεγονότα και δεν είναι περίεργο ότι λαμβάνουμε ειδοποιήσεις σε επιτραπέζιους και κινητούς υπολογιστές.

Εάν, ωστόσο, θέλετε να δημιουργήσετε ειδοποίηση για τον ιστότοπό σας, μπορείτε να το δημιουργήσετε εύκολα με αυτό το plugin που ονομάζεται PNotify. Πρόκειται για μια ελεύθερη και ανοιχτή javascript plugin με πολλές επιλογές και είναι εύκολο στη χρήση. Με το PNotify, μπορείτε ακόμη και να εμφανίσετε μέχρι και 1000 ειδοποιήσεις ταυτόχρονα (δείτε αυτό το τεστ συγκριτικής αξιολόγησης για να το δοκιμάσετε). Πόσο δροσερό είναι αυτό?

Γιατί να χρησιμοποιήσετε το PNotify?

Το PNotify, παλαιότερα γνωστό ως Pines Notify, φέρει τρεις κύριους τύπους ειδοποιήσεων: πληροφορίες, ειδοποίηση και λάθος. Έχει μια δέσμη χαρακτηριστικών, εφέ, θέματα και επίσης στυλ. Μπορείτε να επιλέξετε διαφορετικά στυλ από το Bootstrap, το jQuery UI, το Font Awesome ή το δικό σας στυλ. Υπάρχουν επίσης περίπου 18 έτοιμα θέματα (που έγιναν με το Bootswatch) από τα οποία μπορείτε να διαλέξετε και υπάρχουν ακόμη και εφέ μετάβασης.

Το μεγάλο πράγμα για το PNotify είναι ότι δεν διαθέτει απλά γραφικά χαρακτηριστικά, αλλά είναι επίσης εμπλουτισμένο με ισχυρά και πλούσια API (ή modules). Αυτά τα API περιλαμβάνουν ειδοποιήσεις επιφάνειας εργασίας (βασισμένες στο πρότυπο πρότυπο ειδοποιήσεων Ιστού), υποστήριξη δυναμικής ενημέρωσης, επανάκλησεις για διάφορα συμβάντα, πρόγραμμα προβολής ιστορικού για προβολή προηγούμενων ειδοποιήσεων και υποστήριξη HTML στον τίτλο και στο σώμα.

PNotify παρέχει ένα διακριτική ειδοποίηση που σημαίνει ότι μπορείτε να κάνετε κλικ σε οποιοδήποτε στοιχείο πίσω από την ανακοίνωση χωρίς να το απορρίψετε. Μπορείτε επίσης να προσδιορίσετε πού εμφανίζεται η ειδοποίηση με τις δυνατότητες Stacks, που σας επιτρέπει να τοποθετήσετε την ειδοποίηση παντού: ως στυλ επάνω / κάτω ράβδου ή ακόμα και ως εργαλείο.

Βασική χρήση

Οι πηγές του PNotify έρχονται σε προσαρμοσμένες ενότητες δέσμης και είναι διαθέσιμες εδώ.

Ξεκινώντας

Αφού αποκτήσετε τις πηγές, συμπεριλάβετε τις στην HTML ως εξής:

Το PNotify είναι πολύ εύκολο στη χρήση. Ακολουθεί μια απλή ειδοποίηση:

 $ (λειτουργία () new PNotify (title: 'Απλή ειδοποίηση', κείμενο: 'Γεια σου, είμαι απλή ειδοποίηση.');); 

Και αυτό είναι το αποτέλεσμα:

Βασικά, για να δημιουργήσετε μια ειδοποίηση ξεκινάτε μια νέα λειτουργία PNotify. Ο τίτλος, το κείμενο, το στυλ και άλλες επιλογές μπορούν στη συνέχεια να περάσουν μέσα στη λειτουργία. Εάν δεν καθορίσετε τον τύπο ειδοποίησης, θα χρησιμοποιήσει τον προεπιλεγμένο τύπο που είναι a ειδοποίηση. Υπάρχουν περίπου 20+ διαμορφώσιμες επιλογές μπορείτε να περάσετε. Για να δείτε τη λίστα με την προεπιλεγμένη τιμή της, κάντε κλικ εδώ.

Σχεδίαση

Για να αλλάξετε το στυλ, μπορείτε να περάσετε το στυλ στην ειδοποίηση και καθορίστε το επιθυμητό στυλ. Διαθέσιμα στυλ είναι bootstrap2, bootstrap3, jqueryui και fontawesome. Μην ξεχάσετε να το κάνετε περιλαμβάνουν σχετικές πηγές στυλ στο έργο σας.

Για παράδειγμα, αν θέλω να αλλάξω το προηγούμενο στυλ ειδοποίησης στο θέμα του jQuery UI, χρησιμοποιώ το ακόλουθο απόσπασμα:

 Νέο PNotify (τίτλος: "jQuery UI Style", κείμενο: "Γεια σου, έχω σχεδιαστεί με θέμα jQuery UI", styling: "jqueryui"); 

Υπάρχει ένας άλλος τρόπος να διαμορφώσετε την ειδοποίησή σας, μέσω αυτού του κώδικα:

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

Αλλαγή jqueryui με το στυλ που θέλετε, στη συνέχεια τοποθετήστε αυτή τη γραμμή πριν από την ειδοποίηση όπως έτσι:

 PNotify.prototype.options.styling = "jqueryui"; new PNotify (τίτλος: "jQuery UI Style", κείμενο: "Γεια σου, είμαι στυλ με θέμα jQuery UI."); 

Εδώ είναι το αποτέλεσμά σας, στυλ:

Προσθήκη μονάδων

Οι ενότητες είναι πλούσια API που επιτρέπουν προηγμένες λειτουργίες ειδοποίησης. Υπάρχουν 7 ενότητες στο PNotify: Desktop, κουμπιά, NonBlock, επιβεβαίωση, ιστορικό, επανάκλησεις και μονάδα αναφοράς. Οι ενότητες μπορούν να χρησιμοποιηθούν διαβιβάζοντας τις κατάλληλες επιλογές της στην ειδοποίηση.

Για παράδειγμα, οι παρακάτω είναι οι κωδικοί που σας δείχνουν πώς να χρησιμοποιήσετε την Επιφάνεια εργασίας:

 PNotify.desktop.permission (); Νέο PNotify (τίτλος: "Ειδοποίηση επιφάνειας εργασίας", κείμενο: "Ειδοποίηση επιτραπέζιων υπολογιστών. Πρέπει να μου δώσετε άδεια, ώστε να μπορώ να εμφανίζομαι ως αυτό που έχω. Αν όχι, θα γίνω τακτική ειδοποίηση. ', επιφάνεια εργασίας: desktop: true, icon: null). 

PNotify.desktop.permission (); χρησιμοποιείται για να βεβαιωθείτε ότι οι χρήστες έχουν με την άδεια για την εμφάνιση της ειδοποίησης. Εάν οι χρήστες αποκλείσουν τον ιστότοπο, η ειδοποίηση θα γίνει εμφανίζεται ως τακτική ειδοποίηση αντι αυτου.

Όπως μπορείτε να δείτε, υπάρχει η πρόσθετη επιλογή προσθήκης επιφάνεια εργασίας στον κώδικα. ο επιφάνεια εργασίας: αληθής θα επιτρέψει την ειδοποίηση για επιφάνεια εργασίας. αν το ορίσετε ως ψευδή, η ειδοποίηση θα γίνει μια τακτική ειδοποίηση.

Μπορείτε επίσης να χρησιμοποιήσετε ένα προσαρμοσμένο εικονίδιο μέσω του εικόνισμα επιλογή. Συμπληρώστε την με τη διεύθυνση URL του εικονιδίου σας. μπορείτε να το ορίσετε ψευδής για να απενεργοποιήσετε το εικονίδιο. Εάν το ορίσετε μηδενικό, θα χρησιμοποιηθεί το προεπιλεγμένο εικονίδιο.

Για να δείτε άλλες υλοποιήσεις μονάδων με τις επιλογές τους, μεταβείτε σε αυτόν το σύνδεσμο.

Μπορείτε να προωθήσετε την υλοποίηση μεταβαίνοντας στον επίσημο ιστότοπό της. Εκεί μπορείτε να δείτε κάποια προηγμένη χρήση μαζί με τα demos. Εναλλακτικά, μπορείτε να επισκεφθείτε τη σελίδα του GitHub για περισσότερες πληροφορίες.