Tämä artikkeli on konekäännöksen peiliartikkeli, klikkaa tästä siirtyäksesi alkuperäiseen artikkeliin.

Näkymä: 20094|Vastaus: 2

[HTML/HTML5] Erittäin kaunis hälytysviestilaatikko SweetAlert

[Kopioi linkki]
Julkaistu 24.12.2015 12.00.48 | | | |





Sweet Alert on kaunis muistutusefekti, joka korvaa perinteisen Javascrip{filter}t Alertin. SweetAlert keskittyy ja kohdistuu automaattisesti sivun keskikohtaan, joten se näyttää hyvältä riippumatta siitä, käytätkö pöytäkonetta, puhelinta tai tablettia. Lisäksi tarjolla on laaja valikoima räätälöityjä konfiguraatiovaihtoehtoja joustavaan ohjaukseen.

Näin käytetään:

Esittely:

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

swal({ title: "Error!", text: "Here's my error message!", write: "error", confirmButtonText: "Cool" });
Liitteenä oleva tiedostopaketti: sweetalert-master.zip (650.13 KB, Latausten määrä: 9, 售价: 2 粒MB)

Argumentti
Oletusarvo

Descrip{filter}tion
Niminull (vaaditaan)Modaalin nimi. Se voidaan joko lisätä objektiin avaimen "title" alla tai välittää funktion ensimmäisenä parametrina.
TekstiviestinollaDescrip{filter}tion modaalille. Se voidaan joko lisätä objektiin avaimen "teksti" alla tai välittää funktion toisena parametrina.
tyyppinollaModaalin tyyppi. SweetAlertissa on neljä sisäänrakennettua tyyppiä, jotka näyttävät vastaavan kuvakeanimaation: "varoitus", "Virhe", "Menestys" ja "tietoa". Voit myös asettaa sen "Syöte" saadakseen prompt-modaalin. Se voidaan joko sijoittaa objektiin avaimen "type" alla tai välittää funktion kolmantena parametrina.
allowEscapeKeytrueJos asetetaan muotoontrue, käyttäjä voi poistaa modaalin painamalla Escape-näppäintä.
customClassnollaMukautettu CSS-luokka modalille. Se voidaan lisätä objektiin avaimella "customClass".
salliUlkonaKlikkaafalseJos asetetaan muotoontrue, käyttäjä voi hylätä modaalin klikkaamalla sen ulkopuolelta.
showCancelButtonfalseJos asetetaan muotoontrue, näytetään "Peruuta"-painike, jota käyttäjä voi klikata modaalin poistamiseksi.
showConfirmButtontrueJos asetetaan muotoonfalse, "OK/Vahvista"-painike piilotetaan. Varmista, että asetat ajastimen tai asetat allowOutsideClick true-tilaksi tätä käyttäessäsi, ettet ärsytä käyttäjää.
confirmButtonText"OK"Käytä tätä muuttaaksesi "Vahvista"-painikkeen tekstiä. Jos showCancelButton on asetettu tosiarvoiseksi, vahvistuspainike näyttää automaattisesti "Vahvista" eikä "OK".
vahvistaaButtonColor"#AEDEF4"Käytä tätä muuttaaksesi "Confirm"-painikkeen taustaväriä (täytyy olla HEX-arvo).
cancelButtonText"Peruuta"Käytä tätä muuttaaksesi "Peruuta"-painikkeen tekstiä.
closeOnConfirmtrueAsetettufalsejos haluat, että modaali pysyy auki, vaikka käyttäjä painaisi "Vahvista"-painiketta. Tämä on erityisen hyödyllistä, jos "Vahvista"-painikkeeseen liitetty toiminto on toinen SweetAlert.
closeOnCanceltrueSama kuin closeOnConfirmissa, mutta peruutuspainikkeelle.
imageUrlnollaLisää modaalille räätälöity kuvake. Sen pitäisi sisältää merkkijono, jossa on polku kuvaan.
imageSize"80x80"Jos imageUrl on asetettu, voit määrittää imageSize:n kuvaamaan kuvakkeen kokoa px:ssä. Syötä merkkijono, jonka toisistaan on kaksi arvoa, jotka on erotettu "x":llä. Ensimmäinen arvo on leveys, toinen korkeus.
AjastinnollaModaalin automaattinen sulkuajastin. Asetetaan millisekunteina (millisekunteina).
htmlfalseJos se on asetettu true-tilaan, otsikko- ja tekstiparametrit eivät pääse pois. (Aseta epätosi, jos pelkäät XSS-hyökkäyksiä.)
AnimaatiotrueJos asetetaan muotoonfalse, modaalin animaatio poistetaan käytöstä. Mahdolliset (merkkijono)arvot :pop(oletuksena, kun animaatio on asetettu tosi),liu'utetaan ylhäältä, liuku pohjasta
inputType"teksti"Vaihda syötekentän tyyppiä käyttäessäsitype: "input"(Tämä voi olla hyödyllistä, jos haluat käyttäjien kirjoittavan salasanansa esimerkiksi).
inputPlaceholdernollaKun käytät input-tyyppiä, voit määrittää paikkamerkin, joka auttaa käyttäjää.
inputValuenollaMääritä oletustekstiarvo, jonka haluat syötteesi näkyvän käytössätype: "input"
showLoaderOnConfirmfalseAsetettutruePoistaaksesi painikkeet käytöstä ja näyttämään, että jokin latautuu.





Edellinen:HTTPS Nuo asiat (1) HTTPS-periaate (uudelleenpainos)
Seuraava:aspx vs. mvc sivu captcha
 Vuokraisäntä| Julkaistu 25.2.2017 18.36.23 |
Julkaistu 8.12.2017 15.20.55 |
Layuin pop-runko tuntuu myös hyvältä käyttää
Vastuuvapauslauseke:
Kaikki Code Farmer Networkin julkaisemat ohjelmistot, ohjelmamateriaalit tai artikkelit ovat tarkoitettu vain oppimis- ja tutkimustarkoituksiin; Yllä mainittua sisältöä ei saa käyttää kaupallisiin tai laittomiin tarkoituksiin, muuten käyttäjät joutuvat kantamaan kaikki seuraukset. Tämän sivuston tiedot ovat peräisin internetistä, eikä tekijänoikeuskiistat liity tähän sivustoon. Sinun tulee poistaa yllä oleva sisältö kokonaan tietokoneeltasi 24 tunnin kuluessa lataamisesta. Jos pidät ohjelmasta, tue aitoa ohjelmistoa, osta rekisteröityminen ja hanki parempia aitoja palveluita. Jos rikkomuksia ilmenee, ota meihin yhteyttä sähköpostitse.

Mail To:help@itsvse.com