sweetalert 使用_使用sweetAlert创建不错的警报

sweetalert 使用

在构建JavaScript驱动的网站时，我们经常需要向用户提供反馈，以使他们知道他们执行的操作是否成功。 在网络的早期，开发人员曾经使用window.alert()函数创建消息。 虽然alert()实际上可以使用，并且在各个浏览器中也可以保持一致，但是它不是很灵活，并且说实话，它的外观和感觉很糟糕。 如今，采用了多种方法，从模式到内联消息。 在本文中，我将向您介绍sweetAlert ，该库可以代替JavaScript的alert()函数。

什么是sweetAlert？

如引言中所述， sweetAlert替代了JavaScript的window.alert()函数，该函数显示了非常漂亮的模态窗口。 这是一个没有依赖关系的独立库，由JavaScript文件和CSS文件组成。

该库具有三种不同的风格。 第一个是可在任何Web项目中使用的库， 第二个是专门用于Bootstrap的fork， 第三个是可在Android项目中使用的fork。 从几天前发布的最新版本中可以看出，该项目一直在进行中。

既然您知道该库的全部内容，那么让我们看看如何在您的网站中使用它。

sweetAlert入门

要在项目中使用sweetAlert，您必须下载它并将其包含在打算使用此库的页面中。 有几种下载库的选项：第一个是通过访问其GitHub存储库 ，而第二个是通过Bower。 如果选择使用Bower，则必须运行以下命令：

bower install sweetalert

下载后，您可以像使用其他任何JavaScript库一样，将JavaScript文件包含在通常的script元素中：

<script src="path/to/sweet-alert.min.js"></script>

另外，您必须包括如下所示CSS文件：

<link rel="stylesheet" href="path/to/sweet-alert.css" />

完成后，您就可以在网站上使用sweetAlert了。 最小的使用示例如下所示：

sweetAlert('Congratulations!', 'Your message has been successfully sent', 'success');

结果如下：

我不知道您在想什么，但我喜欢这个小动画！

从上一条语句可以看出，该库通过一种称为sweetAlert的方法进行sweetAlert 。 它最多接受三个参数：

• title （必填）：表示所显示警报标题的字符串
• message （可选）：表示标题下方显示的消息的可选字符串
• type （可选）：表示您要显示的消息类型的可选字符串。 其值可以是"success" ， "error" ， "warning"和"info" 。

该库还提供了一个不错的快捷方式来调用称为swal的sweetAlert方法。 因此，前面的语句可以重写如下：

swal('Congratulations!', 'Your message has been succesfully sent', 'success');

除了提供的参数外，该库还提供了完整的选项集，您可以通过作为方法的第一个参数传递的对象进行设置。 例如，前面的语句可以这样重写：

swal({
   title: 'Congratulations!',
   text: 'Your message has been succesfully sent',
   type: 'success'
});

既然您已经了解了该库的基础知识，那么让我们进一步了解它的选项。

选件

我要介绍的第一个选项允许您更改显示的按钮的文本。 例如，如果要将成功消息的按钮的文本从“确定”更改为“是！”，则可以为名为confirmButtonText的选项设置值。 如果要更改取消按钮的按钮文本，则必须设置cancelButtonText的值。 此时，您中最观察到的人应该举起手说：“到目前为止，我还没有看到任何取消按钮，您在说什么？” 如果您做到了，那就太好了！

事实是，sweetAlert允许您显示取消消息，但您必须明确指定所需的消息。 您可以通过将选项showCancelButton设置为true来true 。

以下代码利用了这三个选项：

swal({
   title: 'Confirm',
   text: 'Are you sure to delete this message?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonText: 'Yes, sir',
   cancelButtonText: 'Not at all'
});

此代码导致以下结果：

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

如果您不喜欢确认按钮的颜色，也可以通过为confirmButtonColor选项设置哈希值来更改它。

另一个有趣的选项是，您可以设置一条消息显示一段固定的时间，然后自动关闭。 您可以通过将表示关闭消息的毫秒数传递给一个名为timer的选项来实现此任务。

以下代码使用其他两个选项：

swal({
   title: 'Confirm',
   text: 'Are you sure to delete this message?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#987463',
   timer: 1500
});

结果如下：

结论

在本文中，我介绍了sweetAlert，该库旨在替代JavaScript的window.alert()函数，该库使您可以向用户显示非常漂亮的消息。 该库可在任何类型的设备上使用，因此您也可以在响应式网站中使用它。 希望您像我一样喜欢该库，并希望在某些项目中给它一个机会。

翻译自: https://www.sitepoint.com/creating-nice-alerts-sweetalert/

sweetalert 使用