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({ title: "Error!", text: "Ось моє повідомлення про помилку!", тип: "error", confirmButtonText: "Cool" }); 
sweetalert-master.zip
(650.13 KB, Кількість завантажень: 9, 售价: 2 粒MB)
Аргумент
| Значення за замовчуванням |
Descrip{filter}tion
| | Заголовок | null (обов'язково) | Назва модалю. Його можна або додати до об'єкта під клавішею «title», або передати як перший параметр функції. | | Текст | нуль | Опис{filter}tion для модаля. Його можна додати до об'єкта під клавішею «text» або передати як другий параметр функції. | | тип | нуль | Тип модалю. SweetAlert має 4 вбудовані типи, які показують відповідну анімацію іконок: "Увага", "Помилка", "Успіх" і "інформація". Ви також можете встановити це як "Вхід" щоб отримати підказний модаль. Його можна або вставити в об'єкт під «тип» клавіші, або передати як третій параметр функції. | | allowEscapeKey | true | Якщо встановлено наtrue, користувач може закрити модаль, натиснувши клавішу Escape. | | customClass | нуль | Кастомний CSS-клас для модалі. Його можна додати до об'єкта за допомогою клавіші "customClass". | | allowOutsideClick | false | Якщо встановлено наtrueкористувач може відхилити модаль, натиснувши назовні його. | | showCancelButton | false | Якщо встановлено наtrue, буде показана кнопка «Скасувати», яку користувач може натиснути, щоб відкинути модаль. | | showConfirmButton | true | Якщо встановлено наfalse, кнопка "OK/Confirm" буде прихована. Обов'язково встановіть таймер або allowOutsideClick у true під час використання, щоб не дратувати користувача. | | confirmButtonText | "Гаразд" | Використовуйте це, щоб змінити текст на кнопці «Підтвердити». Якщо showCancelButton встановлено як true, кнопка підтвердження автоматично показує "Confirm" замість "OK". | | confirmButtonColor | "#AEDEF4" | Використовуйте це, щоб змінити колір фону кнопки «Підтвердити» (має значення HEX). | | cancelButtonText | "Скасувати" | Використовуйте це, щоб змінити текст на кнопці «Скасувати». | | closeOnConfirm | true | Встановлено наfalseякщо ви хочете, щоб модаль залишався відкритим, навіть якщо користувач натискає кнопку «Підтвердити». Це особливо корисно, якщо функція, приєднана до кнопки «Підтвердити», — це ще один SweetAlert. | | closeOnCancel | true | Те саме, що і closeOnConfirm, але для кнопки скасування. | | imageUrl | нуль | Додайте кастомізовану іконку для модалю. Має містити рядок із шляхом до зображення. | | imageSize | "80x80" | Якщо imageUrl встановлено, ви можете вказати imageSize, щоб показати, яким розміром має бути іконка в px. Передайте рядок із двома значеннями, розділеними «x». Перше значення — це ширина, друге — висота. | | Таймер | нуль | Таймер автоматичного закриття модалі. Дія відбувається в мс (мілісекунди). | | html | false | Якщо встановлено true, параметри заголовка та тексту не зникнуть. (Встановіть на false, якщо боїтеся XSS-атак.) | | Анімація | true | Якщо встановлено наfalse, анімація модалу буде вимкнена. Можливі (рядкові) значення:поп(за замовчуванням, коли анімація встановлена на true),слайд зверху, слайд знизу | | inputType | "текст" | Змініть тип вхідного поля при використанніtype: "input"(Це може бути корисно, якщо ви хочете, щоб користувачі ввели пароль, наприклад). | | inputPlaceholder | нуль | При використанні типу введення можна зазначити тимчасовий заповнювач, який допоможе користувачу. | | inputValue | нуль | Вкажіть значення тексту за замовчуванням, яке ви хочете, щоб ваш вхід відображався під час використанняtype: "input" | | showLoaderOnConfirm | false | Встановлено наtrueщоб вимкнути кнопки і показати, що щось завантажується. |
|
Опубліковано 24.12.2015 12:00:48
|
|
|
|
Орендодавець|
Опубліковано 25.02.2017 18:36:23
|
Опубліковано 08.12.2017 15:20:55