"Sweet Alert" yra gražus priminimo efektas, pakeičiantis tradicinį "Javascrip{filter}t Alert". "SweetAlert" automatiškai centruojasi ir sulygiuojamas su puslapio centru, todėl puikiai atrodo, nesvarbu, ar naudojate stalinį kompiuterį, telefoną ar planšetinį kompiuterį. Be to, yra daugybė pasirinktinių konfigūracijos parinkčių, kad būtų galima lanksčiai valdyti.
Kaip naudoti:
Pristatome:
<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css"> Tada paprastas pavyzdys:
swal({ title: "Klaida!", text: "Štai mano klaidos pranešimas!", tipas: "klaida", confirmButtonText: "Cool" }); Pridėtas failų paketas:
sweetalert-master.zip
(650.13 KB, Atsisiuntimų skaičius: 9, 售价: 2 粒MB)
Argumentas
| Numatytoji vertė | Descrip{filter}tion
| | Pavadinimas | null (būtina) | Modalo pavadinimas. Jis gali būti pridėtas prie objekto pagal raktą "pavadinimas" arba perduotas kaip pirmasis funkcijos parametras. | | SMS žinutė | nulis | Modalo aprašymas{filter}. Jis gali būti pridėtas prie objekto po raktu "tekstas" arba perduotas kaip antrasis funkcijos parametras. | | rūšis | nulis | Modalo tipas. "SweetAlert" yra su 4 įmontuotais tipais, kurie parodys atitinkamą piktogramos animaciją: "ĮSPĖJIMAS", "klaida", "Sėkmė" ir "informacija". Taip pat galite nustatyti jį kaip "Įvestis", kad gautumėte greitą modalą. Jis gali būti įdėtas į objektą po raktu "tipas" arba perduotas kaip trečiasis funkcijos parametras. | | allowEscapeKey | true | Jei nustatyta įtrue, vartotojas gali atmesti modalą paspausdamas klavišą "Escape". | | customClass | nulis | Pasirinktinė CSS klasė modalui. Jį galima pridėti prie objekto raktu "customClass". | | allowOutsideClick | false | Jei nustatyta įtrue, vartotojas gali atsisakyti modalo spustelėdamas už jo ribų. | | showCancelButton | false | Jei nustatyta įtrue, bus rodomas mygtukas "Atšaukti", kurį vartotojas gali spustelėti, kad atmestų modalą. | | showConfirmButton | true | Jei nustatyta įfalse, mygtukas "Gerai/Patvirtinti" bus paslėptas. Naudodami tai įsitikinkite, kad nustatėte laikmatį arba nustatykite allowOutsideClick į true, kad neerzintumėte vartotojo. | | confirmButtonText | "Gerai" | Naudokite šią funkciją, jei norite pakeisti mygtuką "Patvirtinti". Jei showCancelButton nustatytas kaip teisingas, patvirtinimo mygtukas automatiškai parodys "Patvirtinti", o ne "Gerai". | | confirmButtonColor | "#AEDEF4" | Naudokite tai norėdami pakeisti mygtuko "Patvirtinti" fono spalvą (turi būti HEX reikšmė). | | cancelButtonText | "Atšaukti" | Naudokite šią funkciją, jei norite pakeisti mygtuką "Atšaukti". | | closeOnPatvirtinti | true | Nustatykite įfalsejei norite, kad modalas liktų atidarytas, net jei vartotojas paspaudžia mygtuką "Patvirtinti". Tai ypač naudinga, jei prie mygtuko "Patvirtinti" pridėta funkcija yra dar viena "SweetAlert". | | closeOnCancel | true | Tas pats kaip closeOnConfirm, bet atšaukimo mygtukui. | | vaizdo URL | nulis | Pridėkite tinkintą modalo piktogramą. Turėtų būti eilutė su keliu į vaizdą. | | imageSize | "80x80" | Jei nustatytas imageUrl, galite nurodyti imageSize, kad apibūdintumėte, kokio dydžio piktograma turi būti px. Įveskite eilutę su dviem reikšmėmis, atskirtomis "x". Pirmoji vertė yra plotis, antroji - aukštis. | | laikmatis | nulis | Automatinis modalo uždarymo laikmatis. Nustatykite ms (milisekundėmis). | | html | false | Jei nustatyta kaip teisinga, pavadinimo ir teksto parametrai nebus išvengti. (Nustatykite kaip false, jei nerimaujate dėl XSS atakų.) | | animacija | true | Jei nustatyta įfalse, modalo animacija bus išjungta. Galimos (eilutės) reikšmės:pop(numatytasis, kai animacija nustatyta kaip teisinga),Slysti iš viršaus, Slysti iš apačios | | įvesties tipas | "tekstas" | Pakeiskite įvesties lauko tipą, kai naudojatetype: "input"(Tai gali būti naudinga, jei norite, kad vartotojai įvestų, pavyzdžiui, savo slaptažodį). | | įvesties vietos rezervavimo ženklas | nulis | Kai naudojate įvesties tipą, galite nurodyti vietos rezervavimo ženklą, kuris padės vartotojui. | | įvesties reikšmė | nulis | Nurodykite numatytąją teksto reikšmę, kurią norite rodyti naudojanttype: "input" | | showLoaderOnConfirm | false | Nustatykite įtrue, kad išjungtumėte mygtukus ir parodytumėte, kad kažkas įkeliama. |
|