Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Utsikt: 20094|Svar: 2

[HTML/HTML5] En mycket vacker meddelanderuta för varningar SweetAlert

[Kopiera länk]
Publicerad på 2015-12-24 12:00:48 | | | |





Sweet Alert är en vacker påminnelseeffekt som ersätter den traditionella Javascrip{filter}t Alert. SweetAlert centrerar och justerar automatiskt till mitten av sidan, så det ser bra ut oavsett om du använder en stationär dator, telefon eller surfplatta. Dessutom finns ett brett utbud av anpassade konfigurationsalternativ för flexibel styrning.

Hur man använder:

Introduktion:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Sedan, ett enkelt exempel:

swal({ titel: "Fel!", text: "Här är mitt felmeddelande!", skriv: "fel", bekräftaKnappText: "Cool" });
Bifogat filpaket: sweetalert-master.zip (650.13 KB, Antal nedladdningar: 9, 售价: 2 粒MB)

Argument
Standardvärde

Descrip{filter}tion
Titelnull (krävs)Titeln på modalen. Den kan antingen läggas till objektet under nyckelns "titel" eller skickas som den första parametern för funktionen.
SMSnollEn descrip{filter}tion för modalen. Den kan antingen läggas till objektet under nyckeln "text" eller skickas som den andra parametern i funktionen.
typnollTypen av modal. SweetAlert levereras med fyra inbyggda typer som visar en motsvarande ikonanimation: "Varning", "Fel", "Framgång" och "info". Du kan också ställa in det som "Indata" för att få en prompt modal. Den kan antingen placeras i objektet under nyckeln "typ" eller skickas som den tredje parametern för funktionen.
allowEscapeKeytrueOm satt tilltrue, kan användaren stänga modalen genom att trycka på Escape-tangenten.
customClassnollEn anpassad CSS-klass för modalen. Den kan läggas till objektet under nyckeln "customClass".
tilläteUtanförKlickfalseOm satt tilltrue, kan användaren stänga av modalen genom att klicka utanför den.
showCancelButtonfalseOm satt tilltrue, visas en "Avbryt"-knapp, som användaren kan klicka på för att stänga modalen.
showConfirmButtontrueOm satt tillfalse, kommer "OK/Bekräfta"-knappen att vara dold. Se till att du ställer in en timer eller ställer in allowOutsideClick på true när du använder detta, för att inte irritera användaren.
bekräftaKnappText"Okej"Använd detta för att ändra texten på "Bekräfta"-knappen. Om showCancelButton är satt som sann, kommer bekräfta-knappen automatiskt att visa "Bekräfta" istället för "OK".
bekräftarKnappFärg"#AEDEF4"Använd detta för att ändra bakgrundsfärgen på "Bekräfta"-knappen (måste vara ett HEX-värde).
avbrytaButtonText"Avbryt"Använd detta för att ändra texten på "Avbryt"-knappen.
stängaPåBekräftatrueStäll in påfalseom du vill att modalen ska förbli öppen även om användaren trycker på "Bekräfta"-knappen. Detta är särskilt användbart om funktionen som är kopplad till "Bekräfta"-knappen är en annan SweetAlert.
closeOnCanceltrueSamma som closeOnConfirm, men för avbryt-knappen.
imageUrlnollLägg till en anpassad ikon för modalen. Den ska innehålla en sträng med vägen till bilden.
bildStorlek"80x80"Om imageUrl är inställd kan du ange imageSize för att beskriva hur stor du vill att ikonen ska vara i px. Passa in en sträng med två värden separerade av ett "x". Det första värdet är bredden, det andra är höjden.
timernollAutomatisk stängningstimer för modalen. Inställd på ms (millisekunder).
htmlfalseOm den är sant kommer den inte att undkomma titel- och textparametrar. (Ställ in på false om du är orolig för XSS-attacker.)
AnimationtrueOm satt tillfalse, kommer modalens animation att inaktiveras. Möjliga (sträng)värden :pop(standard när animationen sätts till sann),Glid-från-toppen, Glid-från-botten
inputType"text"Byt typ av inmatningsfält när du användertype: "input"(Detta kan vara användbart om du vill att användare ska skriva in sitt lösenord till exempel).
inputPlaceholdernollNär du använder input-typen kan du ange en platshållare för att hjälpa användaren.
inputValuenollAnge ett standardtextvärde som du vill att din inmatning ska visa när du användertype: "input"
showLoaderOnConfirmfalseStäll in påtrueFör att inaktivera knapparna och visa att något laddas.





Föregående:HTTPS De där sakerna (1) HTTPS-principen (Återutgivning)
Nästa:ASPX vs. MVC Page Captcha
 Hyresvärd| Publicerad på 2017-02-25 18:36:23 |
Publicerad på 2017-12-08 15:20:55 |
Layuis pop-ram känns också bra att använda
Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.

Mail To:help@itsvse.com