See artikkel on masintõlke peegelartikkel, palun klõpsake siia, et hüpata algse artikli juurde.

Vaade: 20094|Vastuse: 2

[HTML/HTML5] Väga ilus teavituskast SweetAlert

[Kopeeri link]
Postitatud 24.12.2015 12:00:48 | | | |





Sweet Alert on kaunis meeldetuletusefekt, mis asendab traditsioonilise Javascrip{filter}t Alerti. SweetAlert keskendub automaatselt lehe keskele, nii et see näeb suurepärane välja nii lauaarvuti, telefoni kui tahvelarvuti kasutamisel. Lisaks on saadaval lai valik kohandatud konfiguratsioonivõimalusi paindlikuks juhtimiseks.

Kuidas kasutada:

Tutvustame:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Siis lihtne näide:

swal({ pealkiri: "Error!", text: "Siin on minu veateade!", type: "error", confirmButtonText: "Cool" });
Lisatud failipakett: sweetalert-master.zip (650.13 KB, Allalaadimiste arv: 9, 售价: 2 粒MB)

Argument
Vaikimisi väärtus

Descrip{filter}tion
Pealkirinull (vajalik)Modaali pealkiri. Seda saab kas lisada objektile võtme "pealkirja" all või edastada funktsiooni esimese parameetrina.
TekstnullA descrip{filter}tion modaali jaoks. Seda saab kas lisada objektile klahvi "text" all või edastada funktsiooni teise parameetrina.
liiknullModaali tüüp. SweetAlertil on 4 sisseehitatud tüüpi, mis kuvavad vastavat ikooni animatsiooni: "Hoiatus", "viga", "Edu" ja "info". Võid selle määrata ka "Sisend" et saada prompt modal. Seda saab kas panna objekti klahvi "type" alla või edastada funktsiooni kolmanda parameetrina.
allowEscapeKeytrueKui seatudtrue, kasutaja saab modaali kõrvale jätta, vajutades Escape-klahvi.
customClassnullKohandatud CSS-klass modaali jaoks. Seda saab lisada objektile võtme "customClass" all.
allowOutsideClickfalseKui seatudtrue, kasutaja saab modaali välja lülitada, klõpsates selle välisküljele.
showCancelButtonfalseKui seatudtrue, kuvatakse nupp "Tühista", millele kasutaja saab klõpsata, et modaal välja lülitada.
showKinnitaNupptrueKui seatudfalse, "OK/Confirm" nupp peidetakse. Veendu, et seadistad taimeri või seadistad allowOutsideClick tõeks, et kasutajat mitte häirida.
kinnitaButtonText"Olgu"Kasuta seda, et muuta teksti "Kinnita"-nupul. Kui showCancelButton on seatud tõeks, näitab kinnitamisnupp automaatselt "Kinnita" asemel "OK".
kinnitaButtonColor"#AEDEF4"Kasuta seda, et muuta "Kinnita" nupu taustavärvi (peab olema HEX-väärtus).
cancelButtonText"Tühista"Kasuta seda, et muuta "Tühista" nupu teksti.
closeOnKinnitatrueSeadistatudfalsekui soovid, et modaal jääks avatuks isegi siis, kui kasutaja vajutab "Kinnita" nuppu. See on eriti kasulik, kui funktsioon, mis on ühendatud "Kinnita"-nupule, on veel üks SweetAlert.
closeOnCanceltrueSama mis closeOnConfirm'is, aga tühistamisnupu jaoks.
imageUrlnullLisa modaalile kohandatud ikoon. Peaks sisaldama stringi koos teekonnaga pildini.
imageSize"80x80"Kui imageUrl on seatud, saad määrata imageSize'i, mis kirjeldab, kui suur sa soovid ikooni px-is teha. Edasta string, mille vahel on kaks väärtust, mis on eraldatud "x"-ga. Esimene väärtus on laius, teine kõrgus.
TaimernullModaali automaatne sulgemistaimer. Seadistatud millisekundites (millisekundites).
htmlfalseKui seatud tõele, ei pääse see pealkirja ega teksti parameetritest. (Kui kardad XSS-rünnakuid, siis sea vale peale.)
AnimatsioontrueKui seatudfalse, modaali animatsioon lülitatakse välja. Võimalikud (string) väärtused :pop(vaikimisi, kui animatsioon on seatud tõele),libisemine ülevalt, libisemine altpoolt
inputType"tekst"Muuda sisendvälja tüüpi, kui kasutadtype: "input"(See võib olla kasulik, kui soovid, et kasutajad sisestaksid oma parooli näiteks).
inputPlaceholdernullSisendtüübi kasutamisel saad määrata kohatäite, mis aitab kasutajat.
inputValuenullMäära vaikimisi tekstiväärtus, mida soovid, et sisend kuvaks kasutamiseltype: "input"
showLoaderOnConfirmfalseSeadistatudtrueet nupud keelata ja näidata, et midagi laadib.





Eelmine:HTTPS Need asjad (1) HTTPS printsiip (kordustrükk)
Järgmine:aspx vs. mvc lehekülje captcha
 Üürileandja| Postitatud 25.02.2017 18:36:23 |
Postitatud 08.12.2017 15:20:55 |
Layui pop-raam tundub samuti hea kasutada
Disclaimer:
Kõik Code Farmer Networki poolt avaldatud tarkvara, programmeerimismaterjalid või artiklid on mõeldud ainult õppimiseks ja uurimistööks; Ülaltoodud sisu ei tohi kasutada ärilistel ega ebaseaduslikel eesmärkidel, vastasel juhul kannavad kasutajad kõik tagajärjed. Selle saidi info pärineb internetist ning autoriõiguste vaidlused ei ole selle saidiga seotud. Ülaltoodud sisu tuleb oma arvutist täielikult kustutada 24 tunni jooksul pärast allalaadimist. Kui sulle programm meeldib, palun toeta originaaltarkvara, osta registreerimist ja saa paremaid ehtsaid teenuseid. Kui esineb rikkumist, palun võtke meiega ühendust e-posti teel.

Mail To:help@itsvse.com