Ez a cikk egy tükör gépi fordítás, kérjük, kattintson ide, hogy ugorjon az eredeti cikkre.

Nézet: 20094|Válasz: 2

[HTML/HTML5] Egy nagyon szép figyelmeztető üzenetdoboz SweetAlert

[Linket másol]
Közzétéve 2015. 12. 24. 12:00:48 | | | |





A Sweet Alert egy gyönyörű emlékeztető hatás, amely a hagyományos Javascrip{filter}t Alert leváltja. A SweetAlert automatikusan középre helyezi és igazítja az oldal közepére, így jól néz ki, akár asztali számítógépet, telefont vagy táblagépet használsz. Emellett széles körű egyedi konfigurációs lehetőségek állnak rendelkezésre a rugalmas vezérlés érdekében.

Hogyan kell használni:

Bevezetés:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Ezután egy egyszerű példa:

swal({ title: "Error!", text: "Itt a hibaüzenetem!", type: "error", confirmButtonText: "Cool" });
Csatolt fájlcsomag: sweetalert-master.zip (650.13 KB, Letöltések száma: 9, 售价: 2 粒MB)

Érv
Alapértelmezett érték

Descrip{filter}tion
Címnull (kötelező)A modal címe. Hozzáadható az objektumhoz a "title" kulcs alatt, vagy továbbítható a függvény első paramétereként.
SMSnullaA modal leírása. Vagy hozzáadható az objektumhoz a "text" kulcs alatt, vagy a függvény második paramétereként adható át.
típusnullaA modal típusa. A SweetAlert 4 beépített típussal érkezik, amelyek egy megfelelő ikonanimációt mutatnak: "Figyelmeztetés", "hiba", "Siker" és "info". Beállíthatod azt is, hogy "Bemenet"hogy prompt modált kapjon. Vagy a "type" kulcs alatt lehet behelyezni az objektumba, vagy a függvény harmadik paramétereként adható át.
allowEscapeKeytrueHa beállítvatrue, a felhasználó a Escape gomb megnyomásával megszüntetheti a modalt.
customClassnullaEgy egyedi CSS osztály a modalhoz. Hozzáadható az objektumhoz a "customClass" kulcs alatt.
allowOutsideClickfalseHa beállítvatrue, a felhasználó a modált kívülre kattintva megszüntetheti.
showCancelButtonfalseHa beállítvatrue, megjelenik egy "Cancel" gomb, amelyre a felhasználó rákattinthat a modal megszüntetéséhez.
showConfirmButtontrueHa beállítvafalse, a "OK/Confirm" gomb el lesz rejtve. Mindenképp állítasz be időzítőt vagy állítsd az engedélyezett OutsideClick valóra ezt használatkor, hogy ne bosszantsd a felhasználót.
confirmButtonText"Oké"Ezt használhatod a "Megerősítés" gomb szövegének megváltoztatásához. Ha a showCancelButton igaznak van beállítva, a megerősítő gomb automatikusan "Megerősít" gombot mutat a "OK" helyett.
megerősítésButtonColor"#AEDEF4"Ezt használd a "Megerősítés" gomb háttérszínének megváltoztatására (HEX értéknek kell lennie).
cancelButtonText"Lemondás"Ezt használd a "Cancel" gomb szövegének megváltoztatására.
closeOnConfirmtrueBeállításfalseha azt szeretnéd, hogy a modal nyitva maradjon, még akkor is, ha a felhasználó megnyomja a "Megerősíteni" gombot. Ez különösen hasznos, ha a "Megerősíteni" gombra csatlakoztatott funkció egy másik SweetAlert.
closeOnCanceltrueUgyanaz, mint a closeOnConfirm, csak a cancel gombhoz.
imageUrlnullaAdj hozzá egy testreszabott ikont a modalhoz. Tartalmaznia kell egy stringet a képhez vezető úttal.
imageSize"80x80"Ha az imageUrl be van állítva, megadhatod az imageSize-t, hogy leírja, mekkora legyen az ikon px-ben. Passzol egy olyan húrt, amelynek két értéke egy "x" választja el egymástól. Az első érték a szélesség, a második a magasság.
időzítőnullaA modal automatikus zárási időzítője. Ms-ben (milliszekundumokban) állítjuk be.
htmlfalseHa igazra állítva, nem szabadulnak el a cím és a szöveg paraméterek alól. (Ha aggódsz az XSS támadások miatt, állítsd teşvet színre.)
AnimációtrueHa beállítvafalse, a modal animációja le lesz tiltva. Lehetséges (string) értékek:pop(alapértelmezett, ha az animáció igazra állítva),felülről csúszás, csúsztatás alulról
inputType"szöveg"A bemeneti mező típusának megváltoztatása használat közbentype: "input"(Ez hasznos lehet, ha például azt szeretnéd, hogy a felhasználók beírják a jelszavukat).
inputPlaceholderQuotenullaA input-type használatakor megadhatsz egy helykitöltőt, ami segíti a felhasználót.
inputValuenullaHatározz meg egy alapértelmezett szövegértéket, amit a bemeneted meg akar mutatni használatkortype: "input"
showLoaderOnConfirmfalseBeállítástruehogy letiltsam a gombokat, és jelezzem, hogy valami betöltődik.





Előző:HTTPS Ezek (1) HTTPS elv (újranyomás)
Következő:aspx vs. mvc oldal captcha
 Háziúr| Közzétéve 2017. 02. 25. 18:36:23 |
Közzétéve 2017. 12. 08. 15:20:55 |
Layui pop frame-je is jó használatban van
Lemondás:
A Code Farmer Network által közzétett összes szoftver, programozási anyag vagy cikk kizárólag tanulási és kutatási célokra szolgál; A fenti tartalmat nem szabad kereskedelmi vagy illegális célokra használni, különben a felhasználók viselik az összes következményet. Az oldalon található információk az internetről származnak, és a szerzői jogi vitáknak semmi köze ehhez az oldalhoz. A fenti tartalmat a letöltés után 24 órán belül teljesen törölni kell a számítógépéről. Ha tetszik a program, kérjük, támogassa a valódi szoftvert, vásároljon regisztrációt, és szerezzen jobb hiteles szolgáltatásokat. Ha bármilyen jogsértés történik, kérjük, vegye fel velünk a kapcsolatot e-mailben.

Mail To:help@itsvse.com