Тази статия е огледална статия за машинен превод, моля, кликнете тук, за да преминете към оригиналната статия.

Изглед: 20094|Отговор: 2

[HTML/HTML5] Много красива кутия за съобщения SweetAlert

[Копирай линк]
Публикувано в 24.12.2015 г. 12:00:48 ч. | | | |





Sweet Alert е красив ефект на напомняне, който заменя традиционния Javascrip{filter}t Alert. SweetAlert автоматично се центрира и подравнява в центъра на страницата, така че изглежда страхотно, независимо дали използвате настолен компютър, телефон или таблет. Освен това е наличен широк спектър от персонализирани конфигурации за гъвкаво управление.

Как да използвате:

Представяне:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Тогава един прост пример:

swal({ заглавие: "Error!", text: "Ето моето съобщение за грешка!", type: "error", confirmButtonText: "Cool" });
Приложен пакет с файлове: sweetalert-master.zip (650.13 KB, Брой изтегляния: 9, 售价: 2 粒MB)

Аргумент
Стойност по подразбиране

Descrip{filter}tion
ЗаглавиеNull (задължително)Заглавието на модала. Той може да бъде добавен към обекта под клавиша "заглавие" или да се предаде като първи параметър на функцията.
ТекстnullA descrip{filter}tion for the modal. Той може да бъде добавен към обекта под клавиша "text" или да се предаде като втори параметър на функцията.
видnullТипът на модала. SweetAlert идва с 4 вградени типа, които показват съответната анимация на иконите: "Предупреждение", "Грешка", "Успех" и "инфо". Можете също да го зададете като "Вход" за да получиш модален сигнал. Той може да бъде поставен в обекта под клавиша "type" или да се предаде като трети параметър на функцията.
allowEscapeKeytrueАко е настроено наtrue, потребителят може да премахне модала, като натисне клавиша Escape.
customClassnullПерсонализиран CSS клас за модала. Може да бъде добавен към обекта с клавиша "customClass".
allowOutsideClickfalseАко е настроено наtrue, потребителят може да отхвърли модала, като кликне извън него.
showCancelButtonfalseАко е настроено наtrue, ще се покаже бутон "Cancel", върху който потребителят може да кликне, за да отхвърли модала.
showConfirmButtontrueАко е настроено наfalse, бутонът "OK/Confirm" ще бъде скрит. Уверете се, че сте настроили таймер или сте настроили allowOutsideClick на true, когато използвате това, за да не дразните потребителя.
confirmButtonText"Добре"Използвайте това, за да промените текста на бутона "Потвърди". Ако showCancelButton е настроен като true, бутонът за потвърждение автоматично ще показва "Потвърди" вместо "OK".
confirmButtonColor"#AEDEF4"Използвайте това, за да промените цвета на фона на бутона "Потвърди" (трябва да е HEX стойност).
cancelButtonText"Отмени"Използвайте това, за да промените текста на бутона "Cancel".
closeOnConfirmtrueНастроено наfalseако искаш модалът да остане отворен, дори ако потребителят натисне бутона "Потвърди". Това е особено полезно, ако функцията, прикрепена към бутона "Потвърди", е друг SweetAlert.
closeOnCanceltrueСъщото като closeOnConfirm, но за бутона cancel.
imageUrlnullДобавете персонализирана икона за модала. Трябва да съдържа низ с пътя към изображението.
imageSize"80x80"Ако imageURL е зададен, можете да зададете imageSize, за да описва колко голяма искате да бъде иконата в px. Пуснете низ с две стойности, разделени от "x". Първата стойност е ширината, втората е височината.
таймерnullТаймер за автоматично затваряне на модала. Действието се развива в ms (милисекунди).
htmlfalseАко е настроено на true, няма да се избегнат параметрите за заглавие и текст. (Настроете на false, ако се притеснявате от XSS атаки.)
АнимацияtrueАко е настроено наfalse, анимацията на модала ще бъде деактивирана. Възможни (низови) стойности:поп(по подразбиране, когато анимацията е настроена на true),слайд отгоре, плъзгане отдолу
inputType"съобщение"Променете типа на входното поле при използванеtype: "input"(Това може да е полезно, ако искате потребителите да въвеждат паролата си, например).
inputPlaceholdernullКогато използвате типа вход, можете да зададете заместител, който да помогне на потребителя.
inputValuenullЗадайте стойност по подразбиране, която искате входът ви да показва при използванеtype: "input"
showLoaderOnConfirmfalseНастроено наtrueЗа да деактивира бутоните и да покаже, че нещо се зарежда.





Предишен:HTTPS Тези неща (1) HTTPS принцип (преиздание)
Следващ:ASPX срещу MVC капча на страница
 Хазяин| Публикувано в 25.02.2017 г. 18:36:23 ч. |
Публикувано в 8.12.2017 г. 15:20:55 ч. |
Pop рамката на layui също е приятна за използване
Отричане:
Целият софтуер, програмни материали или статии, публикувани от Code Farmer Network, са само за учебни и изследователски цели; Горното съдържание не трябва да се използва за търговски или незаконни цели, в противен случай потребителите ще понесат всички последствия. Информацията на този сайт идва от интернет, а споровете за авторски права нямат нищо общо с този сайт. Трябва напълно да изтриете горното съдържание от компютъра си в рамките на 24 часа след изтеглянето. Ако ви харесва програмата, моля, подкрепете оригинален софтуер, купете регистрация и получете по-добри услуги. Ако има нарушение, моля, свържете се с нас по имейл.

Mail To:help@itsvse.com