Overhang.js - Πρόσθετο jQuery για μηνύματα ειδοποίησης Dropdown

Πόσο ενοχλητικό είναι το προεπιλεγμένα πλαίσια ειδοποίησης JS? Νιώθουν σαν ένα λείψανο από μια πρωτόγονη εποχή της ανάπτυξης ιστοσελίδων.

Σήμερα, μπορούμε να το κάνουμε διακριτικά μηνύματα ειδοποίησης που μοιράζονται τις ίδιες πληροφορίες, αλλά μην διακόψετε την εμπειρία του χρήστη. Και αυτό ακριβώς μπορείτε να κάνετε overhang.js.

Αυτό το δωρεάν jQuery plugin μπορεί προσθήκη προσαρμοσμένων γραμμών ειδοποιήσεων που πέφτουν από το επάνω μέρος της οθόνης. Είναι τοποθετημένο μέσω CSS και κινούμενο με JavaScript, έτσι ώστε να μπορούν να πέσουν από ένα σταθερό σημείο στην κορυφή ανεξάρτητα από το μήκος της σελίδας.

Μπορείτε να δημιουργήσετε μηνύματα που αυτόματο κλείσιμο μετά από ορισμένο χρόνο, ή άλλοι ότι απαιτούν είσοδο χρήστη.

Τα μηνύματα μπορούν επιτυχία, αποτυχία, σφάλμα ή απλές ειδοποιήσεις με πληροφορίες σχετικά με τον χρήστη ή τη σελίδα. Τα μηνύματα μπορούν επίσης έχουν τα δικά τους κουμπιά ναι / όχι για να ζητήσετε από τους χρήστες ερωτήσεις όπως μια προειδοποίηση ειδοποίησης JavaScript.

Υπάρχει ακόμη και μια επιλογή για να δημιουργήσετε προτροπές drop down με ένα πεδίο εισαγωγής. Αυτό θα ήταν τέλειο για μια φόρμα συμμετοχής μέσω ηλεκτρονικού ταχυδρομείου.

Overhang.js υποστηρίζει όλα τα μεγάλα προγράμματα περιήγησης που υποστηρίζονται από το jQuery και είναι επίσης powered by jQuery UI για τα κινούμενα χαρακτηριστικά.

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

Κάθε κλήση προς το εξοχή() μέθοδος μπορεί πάρτε οποιονδήποτε αριθμό παραμέτρων. Αυτά είναι που ονομάζεται “επιλογές” και σας δίνουν πλήρη έλεγχο σε κάθε πλαίσιο ειδοποίησης.

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

Εδώ είναι α δείγμα δείγματος αποδεικνύοντας πώς να δημιουργήστε ένα πλαίσιο επιβεβαίωσης:

 // $ confirmation ($) ("type": "επιβεβαίωση", yesMessage: "Ναι παρακαλώ!", NoMessage: 

Μπορείτε να δείτε αυτό είναι πολύ απλό και αυτό δεν απαιτεί πολύ κώδικα jQuery.

Προς το κατεβάστε ένα αντίγραφο του plugin, μπορείτε να επισκεφθείτε το repo στο GitHub όπου μπορείτε επίσης να περιηγηθείτε απευθείας στα αρχεία προέλευσης. Ή, αν θέλετε δείτε περισσότερα ζωντανά παραδείγματα επισκεφθείτε την ιστοσελίδα του Overhang.js.