Ta članek je zrcalni članek strojnega prevajanja, kliknite tukaj za skok na izvirni članek.

Pogled: 20094|Odgovoriti: 2

[HTML/HTML5] Zelo lepa opozorilna škatla SweetAlert

[Kopiraj povezavo]
Objavljeno na 24. 12. 2015 12:00:48 | | | |





Sweet Alert je čudovit učinek spominjanja, ki nadomešča tradicionalni Javascrip{filter}t Alert. SweetAlert samodejno centrira in poravna na sredino strani, zato izgleda odlično, ne glede na to, ali uporabljate namizni računalnik, telefon ali tablico. Poleg tega je na voljo širok nabor možnosti prilagojene konfiguracije za prilagodljivo upravljanje.

Kako uporabljati:

Predstavljamo:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Nato preprost primer:

swal({ naslov: "Error!", besedilo: "Tukaj je moje sporočilo o napaki!", tip: "error", confirmButtonText: "Cool" });
Priložen paket datotek: sweetalert-master.zip (650.13 KB, Število prenosov: 9, 售价: 2 粒MB)

Argument
Privzeta vrednost

Descrip{filter}tion
Naslovnull (obvezno)Naslov modala. Lahko ga dodamo objektu pod ključem "title" ali pa ga posredujemo kot prvi parameter funkcije.
Besedilno sporočiloNullA descrip{filter}tion za modal. Lahko ga dodamo objektu pod ključem "text" ali pa ga posredujemo kot drugi parameter funkcije.
vrstaNullVrsta modalne terapije. SweetAlert ima štiri vgrajene vrste, ki prikazujejo ustrezno animacijo ikone: "Opozorilo", "napaka", "Uspeh" in "info". Lahko ga nastavite tudi kot "Prispevek" da dobiš prompt modal. Lahko ga vstavimo v objekt pod tipko "tip" ali pa ga posredujemo kot tretji parameter funkcije.
allowEscapeKeytrueČe je nastavljeno natrue, uporabnik lahko modal zavrne s pritiskom na tipko Escape.
customClassNullPrilagojen CSS razred za ta modal. Lahko se doda objektu pod ključem "customClass".
dovoliOutsideClickfalseČe je nastavljeno natrue, uporabnik lahko modal zavrne s klikom zunaj njega.
showCancelButtonfalseČe je nastavljeno natrue, bo prikazan gumb "Prekliči", na katerega lahko uporabnik klikne, da prekliče modal.
showConfirmButtontrueČe je nastavljeno nafalse, gumb "OK/Potrdi" bo skrit. Poskrbite, da nastavite časovnik ali allowOutsideClick na true, ko to uporabljate, da ne motite uporabnika.
confirmButtonText"V redu"Uporabite to za spremembo besedila na gumbu "Potrdi". Če je showCancelButton nastavljen kot true, bo gumb za potrditev samodejno prikazal "Potrdi" namesto "OK".
confirmButtonColor"#AEDEF4"Uporabite to za spremembo barve ozadja gumba "Potrdi" (mora biti HEX vrednost).
cancelButtonText"Prekliči"Uporabite to za spremembo besedila na gumbu "Prekliči".
closeOnConfirmtrueNastavljeno nafalseče želite, da modal ostane odprt, tudi če uporabnik pritisne gumb "Potrdi". To je še posebej uporabno, če je funkcija, povezana z gumbom "Potrdi", še en SweetAlert.
closeOnCanceltrueEnako kot closeOnConfirm, vendar za gumb za preklic.
imageUrlNullDodajte prilagojeno ikono za modal. Vsebuje niz s potjo do slike.
imageSize"80x80"Če je imageUrl nastavljen, lahko določite imageSize, da opiše, kako velika naj bo ikona v px. Prenesite niz z dvema vrednostma, ločenima z "x". Prva vrednost je širina, druga višina.
TimerNullSamodejni časovnik zapiranja modala. Nastavljeno v ms (milisekundah).
htmlfalseČe je nastavljen na true, ne bo zapustil parametrov naslova in besedila. (Če te skrbijo napadi XSS, nastavi na napačno.)
AnimacijatrueČe je nastavljeno nafalse, animacija modala bo onemogočena. Možne (nizne) vrednosti :pop(privzeto, ko je animacija nastavljena na true),drsenje z vrha, drsenje od spodaj
inputType"Besedilo"Spremenite tip vhodnega polja pri uporabitype: "input"(to je lahko uporabno, če želite, da uporabniki na primer vnesejo geslo).
inputPlaceholderNullPri uporabi vhodnega tipa lahko določite nadomestek, ki uporabniku pomaga.
inputValueNullDoločite privzeto besedilno vrednost, ki jo želite, da se prikaže vaš vnos pri uporabitype: "input"
showLoaderOnConfirmfalseNastavljeno natrueda onemogočiš gumbe in pokažeš, da se nekaj nalaga.





Prejšnji:HTTPS Tiste stvari (1) HTTPS princip (ponatis)
Naslednji:ASPX proti MVC Page CAPTCHA
 Najemodajalec| Objavljeno na 25. 02. 2017 18:36:23 |
Objavljeno na 8. 12. 2017 15:20:55 |
Layuijev pop okvir je prav tako prijeten za uporabo
Disclaimer:
Vsa programska oprema, programski materiali ali članki, ki jih izdaja Code Farmer Network, so namenjeni zgolj učnim in raziskovalnim namenom; Zgornja vsebina ne sme biti uporabljena v komercialne ali nezakonite namene, sicer uporabniki nosijo vse posledice. Informacije na tej strani prihajajo z interneta, spori glede avtorskih pravic pa nimajo nobene zveze s to stranjo. Zgornjo vsebino morate popolnoma izbrisati z računalnika v 24 urah po prenosu. Če vam je program všeč, podprite pristno programsko opremo, kupite registracijo in pridobite boljše pristne storitve. Če pride do kakršne koli kršitve, nas prosimo kontaktirajte po elektronski pošti.

Mail To:help@itsvse.com