Αυτό το άρθρο είναι ένα άρθρο καθρέφτη της αυτόματης μετάφρασης, κάντε κλικ εδώ για να μεταβείτε στο αρχικό άρθρο.

Άποψη: 20094|Απάντηση: 2

[HTML/HTML5] Ένα πολύ όμορφο πλαίσιο μηνυμάτων ειδοποίησης SweetAlert

[Αντιγραφή συνδέσμου]
Δημοσιεύτηκε στις 24/12/2015 12:00:48 μ.μ. | | | |





Το Sweet Alert είναι ένα όμορφο εφέ υπενθύμισης που αντικαθιστά το παραδοσιακό Javascrip{filter}t Alert. Το SweetAlert κεντράρει αυτόματα και ευθυγραμμίζεται στο κέντρο της σελίδας, ώστε να φαίνεται υπέροχο είτε χρησιμοποιείτε επιτραπέζιο υπολογιστή, τηλέφωνο ή tablet. Επιπλέον, διατίθεται ένα ευρύ φάσμα προσαρμοσμένων επιλογών διαμόρφωσης για ευέλικτο έλεγχο.

Τρόπος χρήσης:

Σας παρουσιάζουμε:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Στη συνέχεια, ένα απλό παράδειγμα:

swal({ title: "Σφάλμα!", text: "Εδώ είναι το μήνυμα σφάλματος μου!", τύπος: "error", confirmButtonText: "Cool" });
Συνημμένο πακέτο αρχείων: sweetalert-master.zip (650.13 KB, Αριθμός λήψεων: 9, 售价: 2 粒MB)

Επιχείρημα
Προεπιλεγμένη τιμή

Περιγραφή{filter}tion
Τίτλοςnull (υποχρεωτικό)Ο τίτλος του modal. Μπορεί είτε να προστεθεί στο αντικείμενο κάτω από το κλειδί "τίτλος" είτε να περάσει ως η πρώτη παράμετρος της συνάρτησης.
ΚείμενοάκυροςΜια περιγραφή{filter}tion για το modal. Μπορεί είτε να προστεθεί στο αντικείμενο κάτω από το κλειδί "κείμενο" είτε να περάσει ως δεύτερη παράμετρος της συνάρτησης.
δακτυλογραφώάκυροςΟ τύπος του modal. Το SweetAlert έρχεται με 4 ενσωματωμένους τύπους που θα εμφανίζουν μια αντίστοιχη κινούμενη εικόνα εικονιδίων: "προειδοποίηση", "Σφάλμα", "Επιτυχία" και "πληροφορίες". Μπορείτε επίσης να το ορίσετε ως "Εισαγωγή" για να λάβετε μια άμεση λειτουργία. Μπορεί είτε να τοποθετηθεί στο αντικείμενο κάτω από το κλειδί "type" είτε να περάσει ως η τρίτη παράμετρος της συνάρτησης.
allowEscapeKeytrueΕάν οριστεί σεtrue, ο χρήστης μπορεί να απορρίψει το modal πατώντας το πλήκτρο Escape.
customΚλάσηάκυροςΜια προσαρμοσμένη κλάση CSS για το modal. Μπορεί να προστεθεί στο αντικείμενο κάτω από το κλειδί "customClass".
allowOutsideClickfalseΕάν οριστεί σεtrue, ο χρήστης μπορεί να απορρίψει το modal κάνοντας κλικ έξω από αυτό.
showCancelButtonfalseΕάν οριστεί σεtrue, θα εμφανιστεί ένα κουμπί "Ακύρωση", στο οποίο ο χρήστης μπορεί να κάνει κλικ για να απορρίψει το modal.
showConfirmButtontrueΕάν οριστεί σεfalse, το κουμπί "OK/Confirm" θα είναι κρυφό. Βεβαιωθείτε ότι έχετε ρυθμίσει ένα χρονόμετρο ή έχετε ρυθμίσει το allowOutsideClick σε true όταν το χρησιμοποιείτε, για να μην ενοχλείτε τον χρήστη.
confirmButtonText"ΕΝΤΑΞΕΙ"Χρησιμοποιήστε το για να αλλάξετε το κείμενο στο κουμπί "Επιβεβαίωση". Εάν το showCancelButton έχει οριστεί ως true, το κουμπί επιβεβαίωσης θα εμφανίσει αυτόματα "Επιβεβαίωση" αντί για "OK".
confirmButtonColor"#AEDEF4"Χρησιμοποιήστε το για να αλλάξετε το χρώμα φόντου του κουμπιού "Επιβεβαίωση" (πρέπει να είναι τιμή HEX).
cancelButtonText"Ακύρωση"Χρησιμοποιήστε το για να αλλάξετε το κείμενο στο κουμπί "Ακύρωση".
closeOnConfirmtrueΟρίστε σεfalseεάν θέλετε το modal να παραμείνει ανοιχτό ακόμα κι αν ο χρήστης πατήσει το κουμπί "Επιβεβαίωση". Αυτό είναι ιδιαίτερα χρήσιμο εάν η λειτουργία που συνδέεται με το κουμπί "Επιβεβαίωση" είναι ένα άλλο SweetAlert.
closeOnCanceltrueΤο ίδιο με το closeOnConfirm, αλλά για το κουμπί ακύρωσης.
imageUrlάκυροςΠροσθέστε ένα προσαρμοσμένο εικονίδιο για το modal. Θα πρέπει να περιέχει μια συμβολοσειρά με τη διαδρομή προς την εικόνα.
imageSize"80x80"Εάν έχει οριστεί imageUrl, μπορείτε να καθορίσετε το imageSize για να περιγράψετε πόσο μεγάλο θέλετε να είναι το εικονίδιο σε px. Περάστε μια συμβολοσειρά με δύο τιμές που χωρίζονται με ένα "x". Η πρώτη τιμή είναι το πλάτος, η δεύτερη είναι το ύψος.
ΧρονοδιακόπτηςάκυροςΧρονοδιακόπτης αυτόματου κλεισίματος του modal. Ρυθμίστε σε ms (χιλιοστά του δευτερολέπτου).
htmlfalseΕάν οριστεί σε true, δεν θα ξεφύγει από τις παραμέτρους τίτλου και κειμένου. (Ορίστε σε false εάν ανησυχείτε για επιθέσεις XSS.)
Κινούμενα σχέδιαtrueΕάν οριστεί σεfalse, η κινούμενη εικόνα του modal θα απενεργοποιηθεί. Πιθανές τιμές (συμβολοσειράς):ποπ(προεπιλογή όταν η κινούμενη εικόνα έχει οριστεί σε true),Διαφάνεια από πάνω, Σύρετε από κάτω
inputType"κείμενο"Αλλάξτε τον τύπο του πεδίου εισαγωγής κατά τη χρήσηtype: "input"(Αυτό μπορεί να είναι χρήσιμο εάν θέλετε οι χρήστες να πληκτρολογούν τον κωδικό πρόσβασής τους για παράδειγμα).
inputPlaceholderάκυροςΌταν χρησιμοποιείτε τον τύπο εισόδου, μπορείτε να καθορίσετε ένα σύμβολο κράτησης θέσης για να βοηθήσετε τον χρήστη.
inputValueάκυροςΚαθορίστε μια προεπιλεγμένη τιμή κειμένου που θέλετε να εμφανίζεται η εισαγωγή σας κατά τη χρήσηtype: "input"
showLoaderOnConfirmfalseΟρίστε σεtrueγια να απενεργοποιήσετε τα κουμπιά και να δείξετε ότι κάτι φορτώνεται.





Προηγούμενος:HTTPS Αυτά τα πράγματα (1) Αρχή HTTPS (Ανατύπωση)
Επόμενος:Captcha σελίδας ASPX έναντι MVC
 Σπιτονοικοκύρης| Δημοσιεύτηκε στις 25/2/2017 6:36:23 μ.μ. |
Δημοσιεύτηκε στις 8/12/2017 3:20:55 μ.μ. |
Το ποπ πλαίσιο του Layui έχει επίσης καλή αίσθηση στη χρήση
Αποκήρυξη:
Όλο το λογισμικό, το υλικό προγραμματισμού ή τα άρθρα που δημοσιεύονται από το Code Farmer Network προορίζονται μόνο για μαθησιακούς και ερευνητικούς σκοπούς. Το παραπάνω περιεχόμενο δεν θα χρησιμοποιηθεί για εμπορικούς ή παράνομους σκοπούς, άλλως οι χρήστες θα υποστούν όλες τις συνέπειες. Οι πληροφορίες σε αυτόν τον ιστότοπο προέρχονται από το Διαδίκτυο και οι διαφορές πνευματικών δικαιωμάτων δεν έχουν καμία σχέση με αυτόν τον ιστότοπο. Πρέπει να διαγράψετε εντελώς το παραπάνω περιεχόμενο από τον υπολογιστή σας εντός 24 ωρών από τη λήψη. Εάν σας αρέσει το πρόγραμμα, υποστηρίξτε γνήσιο λογισμικό, αγοράστε εγγραφή και λάβετε καλύτερες γνήσιες υπηρεσίες. Εάν υπάρχει οποιαδήποτε παραβίαση, επικοινωνήστε μαζί μας μέσω email.

Mail To:help@itsvse.com