Acest articol este un articol oglindă al traducerii automate, vă rugăm să faceți clic aici pentru a sări la articolul original.

Vedere: 20094|Răspunde: 2

[HTML/HTML5] O cutie de mesaje de alertă foarte frumoasă SweetAlert

[Copiază linkul]
Postat pe 24.12.2015 12:00:48 | | | |





Sweet Alert este un efect de reamintire frumos care înlocuiește tradiționalul Javascrip{filter}t Alert. SweetAlert centralizează și se aliniază automat în centrul paginii, așa că arată grozav indiferent dacă folosești un computer desktop, telefon sau tabletă. În plus, există o gamă largă de opțiuni de configurare personalizată pentru control flexibil.

Cum să folosești:

Introducere:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Apoi, un exemplu simplu:

swal({ titlu: "Eroare!", text: "Iată mesajul meu de eroare!", type: "error", confirmButtonText: "Cool" });
Pachet de fișiere atașat: sweetalert-master.zip (650.13 KB, Numărul de descărcări: 9, 售价: 2 粒MB)

Argument
Valoare implicită

Descrip{filter}tion
Titlunull (obligatoriu)Titlul modalului. Poate fi adăugat fie la obiect sub cheia "titlu", fie trecut ca primul parametru al funcției.
TextzeroO descrip{filter}tion pentru modal. Poate fi fie adăugat la obiect sub tasta "text", fie trecut ca al doilea parametru al funcției.
tipzeroTipul modalului. SweetAlert vine cu 4 tipuri integrate care vor afișa o animație corespunzătoare a pictogramei: "Avertisment", "Eroare", "Succes" și "informații". Poți de asemenea să o setezi ca "Intrare" pentru a obține un prompt modal. Poate fi introdusă fie în obiect sub cheia "type", fie trecută ca al treilea parametru al funcției.
allowEscapeKeytrueDacă se setează latrue, utilizatorul poate respinge modalul apăsând tasta Escape.
Clasă custom.zeroO clasă CSS personalizată pentru modal. Poate fi adăugat obiectului sub cheia "customClass".
allowOutsideClickfalseDacă se setează latrue, utilizatorul poate respinge modalul făcând clic în afara lui.
afișeazăAnularefalseDacă se setează latrue, va fi afișat un buton "Anulează", pe care utilizatorul îl poate activa pentru a respinge modulul.
AfișeazăConfirmăButonultrueDacă se setează lafalse, butonul "OK/Confirmă" va fi ascuns. Asigură-te că setezi un cronometru sau setezi allowOutsideClick pe true când folosești acest lucru, pentru a nu enerva utilizatorul.
confirmButtonText"OK"Folosește asta pentru a schimba textul de pe butonul "Confirmă". Dacă showCancelButton este setat ca adevărat, butonul de confirmare va afișa automat "Confirmă" în loc de "OK".
confirmButtonColor"#AEDEF4"Folosește asta pentru a schimba culoarea de fundal a butonului "Confirmă" (trebuie să fie o valoare HEX).
cancelButtonText"Anulează"Folosește asta pentru a schimba textul de pe butonul "Anulare".
closeOnConfirmtrueSetați lafalsedacă vrei ca modalul să rămână deschis chiar dacă utilizatorul apasă butonul "Confirmă". Acest lucru este deosebit de util dacă funcția atașată butonului "Confirmă" este un alt SweetAlert.
closeOnCanceltrueLa fel ca closeOnConfirm, dar pentru butonul de anulare.
imageUrlzeroAdaugă o pictogramă personalizată pentru modal. Ar trebui să conțină un șir cu drumul către imagine.
imageSize"80x80"Dacă imageUrl este setat, poți specifica imageSize pentru a descrie cât de mare vrei să fie pictograma în px. Transmite un șir cu două valori separate de un "x". Prima valoare este lățimea, a doua este înălțimea.
CronometruzeroÎnchide automat temporizatorul modalului. Setat în ms (milisecunde).
HTMLfalseDacă este setat pe true, nu va scăpa de parametrii titlului și textului. (Setat pe false dacă te îngrijorează atacurile XSS.)
AnimațietrueDacă se setează lafalse, animația Modalului va fi dezactivată. Valori posibile (șiruri):pop(implicit când animația este setată pe true),slide-from-top, Slide-from-bottom
inputType"text"Schimbă tipul câmpului de intrare atunci când foloseștitype: "input"(Acest lucru poate fi util dacă vrei ca utilizatorii să introducă parola, de exemplu).
inputPlaceholderzeroCând folosești tipul de intrare, poți specifica un spațiu provizoriu pentru a ajuta utilizatorul.
inputValuezeroSpecifică o valoare implicită a textului pe care vrei să o afișeze inputul tău atunci când foloseștitype: "input"
showLoaderOnConfirmfalseSetați latruepentru a dezactiva butoanele și a arăta că ceva se încarcă.





Precedent:HTTPS Aceste lucruri (1) Principiul HTTPS (Reprint)
Următor:ASPX vs. MVC PAGE CAPTCHA
 Proprietarul| Postat pe 25.02.2017 18:36:23 |
Postat pe 08.12.2017 15:20:55 |
Și cadrul pop al lui Layui se simte bine de folosit
Disclaimer:
Tot software-ul, materialele de programare sau articolele publicate de Code Farmer Network sunt destinate exclusiv scopurilor de învățare și cercetare; Conținutul de mai sus nu va fi folosit în scopuri comerciale sau ilegale, altfel utilizatorii vor suporta toate consecințele. Informațiile de pe acest site provin de pe Internet, iar disputele privind drepturile de autor nu au legătură cu acest site. Trebuie să ștergi complet conținutul de mai sus de pe calculatorul tău în termen de 24 de ore de la descărcare. Dacă îți place programul, te rugăm să susții software-ul autentic, să cumperi înregistrarea și să primești servicii autentice mai bune. Dacă există vreo încălcare, vă rugăm să ne contactați prin e-mail.

Mail To:help@itsvse.com