Ten artykuł jest lustrzanym artykułem tłumaczenia maszynowego, kliknij tutaj, aby przejść do oryginalnego artykułu.

Widok: 20094|Odpowiedź: 2

[HTML/HTML5] Bardzo piękne powiadomienie SweetAlert

[Skopiuj link]
Opublikowano 24.12.2015 12:00:48 | | | |





Sweet Alert to piękny efekt przypominania, który zastępuje tradycyjny Javascrip{filter}t Alert. SweetAlert automatycznie centruje i ustawia się na środku strony, więc wygląda świetnie, niezależnie od tego, czy korzystasz z komputera stacjonarnego, telefonu czy tabletu. Dodatkowo dostępny jest szeroki wybór opcji konfiguracji dostosowanej do elastycznego sterowania.

Jak użyć:

Przedstawiamy:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Następnie prosty przykład:

swal({ title: "Error!", tekst: "Oto mój komunikat o błędzie!", wpis: "error", confirmButtonText: "Cool" });
Załączony pakiet plików: sweetalert-master.zip (650.13 KB, Liczba pobranych plików: 9, 售价: 2 粒MB)

Argumentacja
Wartość domyślna

Descrip{filter}tion
Tytułnull (wymagany)Tytuł modalu. Może być dodana do obiektu pod kluczem "title" lub przekazana jako pierwszy parametr funkcji.
TekstzeroA descrip{filter}tion dla modalu. Może być dodana do obiektu pod kluczem "tekst" lub przekazywana jako drugi parametr funkcji.
typzeroTyp modalu. SweetAlert oferuje 4 wbudowane typy, które wyświetlają odpowiadającą animację ikon: "Ostrzeżenie", "błąd", "Sukces" i "informacje". Możesz też ustawić to jako "Wkład" aby uzyskać prompt modal. Może być umieszczony w obiekcie pod kluczem "type" lub przekazany jako trzeci parametr funkcji.
permitEscapeKeytrueJeśli ustawimy natrue, użytkownik może odrzucić modal, naciskając Escape.
customClasszeroNiestandardowa klasa CSS dla modalu. Można go dodać do obiektu pod kluczem "customClass".
permitOutsideClickfalseJeśli ustawimy natrue, użytkownik może odrzucić modal, klikając poza nim.
showCancelButtonfalseJeśli ustawimy natrue, pojawi się przycisk "Anuluj", na który użytkownik może kliknąć, aby odrzucić modal.
showPotwierdźPrzycisktrueJeśli ustawimy nafalse, przycisk "OK/Potwierdź" będzie ukryty. Upewnij się, że ustawiłeś timer lub allowOutsideClick na true, żeby nie irytować użytkownika.
confirmButtonText"OK"Użyj tego, aby zmienić tekst na przycisku "Potwierdź". Jeśli przycisk showCancelButton jest ustawiony na true, przycisk potwierdzania automatycznie pokaże "Potwierdź" zamiast "OK".
confirmButtonColor"#AEDEF4"Użyj tego, aby zmienić kolor tła przycisku "Potwierdź" (musi być wartością hex).
cancelButtonText"Anuluj"Użyj tego, aby zmienić tekst na przycisku "Anuluj".
closeOnConfirmtrueUstaw nafalsejeśli chcesz, aby modal pozostał otwarty nawet po naciśnięciu przycisku "Potwierdź". Jest to szczególnie przydatne, jeśli funkcja przypisana do przycisku "Potwierdź" to kolejny SweetAlert.
closeOnCanceltrueTak samo jak closeOnConfirm, ale dla przycisku anuluj.
imageUrlzeroDodaj spersonalizowaną ikonę dla modalu. Powinien zawierać ciąg z drogą do obrazu.
imageSize"80x80"Jeśli imageUrl jest ustawiony, możesz określić imageSize, aby opisywał, jak dużą chcesz mieć ikonę w px. Przekaż ciąg z dwoma wartościami oddzielonymi literą "x". Pierwsza wartość to szerokość, druga to wysokość.
TimerzeroAutomatyczny timer zamykania modalu. Ustaw w ms (milisekundy).
htmlfalseJeśli ustawisz na true, nie wyjdzie z parametrów tytułu i tekstu. (Ustaw na fałszywe, jeśli obawiasz się ataków XSS.)
AnimacjatrueJeśli ustawimy nafalse, animacja modalu zostanie wyłączona. Możliwe wartości (łańcuchowe):pop(domyślnie, gdy animacja ustawiona na true),Zsuwanie z góry, Zsuwanie od dołu
inputType"tekst"Zmień typ pola wejściowego podczas używaniatype: "input"(może to być przydatne, jeśli chcesz, aby użytkownicy wpisywali swoje hasło, na przykład).
inputPlaceholderzeroUżywając typu wejścia, możesz określić zastępcę, który pomoże użytkownikowi.
inputValuezeroOkreśl domyślną wartość tekstową, którą chcesz, aby wyświetlał się podczas używaniatype: "input"
showLoaderOnConfirmfalseUstaw natrueWyłączyć przyciski i pokazać, że coś się ładuje.





Poprzedni:HTTPS Te Rzeczy (1) Zasada HTTPS (przedruk)
Następny:ASPX vs. strona MVC CAPTCHA
 Ziemianin| Opublikowano 25.02.2017 18:36:23 |
Opublikowano 08.12.2017 15:20:55 |
Rama pop Layui też dobrze się używa
Zrzeczenie się:
Całe oprogramowanie, materiały programistyczne lub artykuły publikowane przez Code Farmer Network służą wyłącznie celom edukacyjnym i badawczym; Powyższe treści nie mogą być wykorzystywane do celów komercyjnych ani nielegalnych, w przeciwnym razie użytkownicy ponoszą wszelkie konsekwencje. Informacje na tej stronie pochodzą z Internetu, a spory dotyczące praw autorskich nie mają z nią nic wspólnego. Musisz całkowicie usunąć powyższą zawartość z komputera w ciągu 24 godzin od pobrania. Jeśli spodoba Ci się program, wspieraj oryginalne oprogramowanie, kup rejestrację i korzystaj z lepszych, autentycznych usług. W przypadku naruszenia praw prosimy o kontakt mailowy.

Mail To:help@itsvse.com