美文网首页iOS开发中的神兵利器
1.14 使用SweetAlert制作漂亮的自定义Alert窗口

1.14 使用SweetAlert制作漂亮的自定义Alert窗口

作者: 互动教程网 | 来源:发表于2018-04-11 20:45 被阅读49次

1. 本节课将为您演示一款非常强大的警告窗口。首先打开浏览器并进入当前的页面,然后点击下载按钮,下载所需的第三方的类库。

image

2. 在弹出的窗口中,点击下载压缩包按钮。

image

3. 压缩包下载完成后,将自动解压为一个文件夹。点击文件夹右侧的箭头,显示该文件夹下的所有文件。

image

4. 接着将项目所需的一个文件,拖动到您的项目中。

image

5. 在弹出的添加文件窗口中,保持默认的设置选项,点击完成按钮,完成文件的导入。

image

6. 这样您就在项目中引入了第三方类库。接着在左侧的项目导航区,打开视图控制器的代码文件。

image

7. 现在开始编写代码,创建一个警告窗口。

image

8. 首先添加一个警告窗口,作为当前类的一个属性。

image

9. 然后初始化一个按钮,当用户点击该按钮时,弹出警告窗口。

image

10. 将按钮控件放置在根视图的中心位置。

image

11. 设置按钮控件的背景颜色为橙色。

image

12. 接着设置按钮控件在正常状态下的标题文字。

image

13. 给按钮控件绑定点击事件。

image

14. 设置根视图的背景颜色为橙色,并将按钮添加到根视图中。

image

15. 添加一个方法,用来响应按钮的点击事件。

image

16. 当按钮被点击时,初始化并弹出一个警告窗口,同时设置窗口中的文字信息。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

17. 在弹出的模拟器中,点击此处的按钮,以弹出一个警告窗口。

18. 当前弹出了一个简单的警告窗口,点击确定按钮,关闭弹出窗口。

image

19. 点击此处的[停止]按钮,关闭模拟器。

image

20. 接着对代码进行一些修改。

image

21. 在此添加一个新的方法,用来响应按钮的点击事件。

image

22. 初始化并弹出一个警告窗口,同时设置窗口中的标题、子标题和样式。

image

23. 接着修改按钮的方法绑定语句,当按钮被点击时,执行新的方法。然后点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

24. 在弹出的模拟器中,再次点击此处的按钮,以弹出一个警告窗口。

25. 当前弹出了一个简单的警告窗口,窗口中包含了标题和子标题。点击此处的[停止]按钮,关闭模拟器。

image

26. 继续对代码进行一些修改。

image

27. 在此添加另一个方法,用来响应按钮的点击事件。

image

28. 初始化并弹出一个警告窗口,同时设置窗口中的标题、子标题,并将窗口样式设置为成功样式。

image

29. 接着修改按钮的方法绑定语句,当按钮被点击时,执行新的方法。然后点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

30. 在弹出的模拟器中,再次点击此处的按钮,以弹出一个警告窗口。

31. 当前弹出了一个警告窗口,窗口中包含了标题和子标题,同时在窗口的上方,还有一个成功类型的动画图标。点击确定按钮,关闭弹出窗口。

image

32. 点击此处的[停止]按钮,关闭模拟器。

image

33. 再次对代码进行一些修改。

image

34. 在此添加另一个方法,该方法用来创建一个带有多个按钮的弹出窗口。

image

35. 初始化并弹出一个警告窗口,同时设置窗口中的标题、子标题和样式,并添加了两个不同外观样式的按钮。

image

36. 添加一条语句,用来响应按钮被点击的事件。

image

37. 当第二个按钮被点击时,弹出另一个错误类型的警告窗口。

image

38. 当第一个按钮被点击时,弹出一个成功类型的警告窗口。接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。

image

39. 然后修改按钮的方法绑定语句,当按钮被点击时,执行新的方法。

40. 然后点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

41. 在弹出的模拟器中,再次点击此处的按钮,以弹出一个警告窗口。

42. 当前弹出了一个警告窗口,窗口中包含了标题、子标题、动画图标和两个按钮,点击其中一个按钮。

image

43. 当按钮被点击时,弹出了另一个警告窗口。点击确定按钮,关闭弹出窗口。

image

44. 点击此处的[停止]按钮,关闭模拟器。

image

45. 接着点击右侧的垂直滚动条,继续添加一个新的方法。

image

46. 该方法用来创建一个拥有自定义图标的窗口。

image

47. 创建一个自定义图标样式的窗口,图标是项目中的一张图片。接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。

image

48. 然后修改按钮的方法绑定语句,当按钮被点击时,执行新的方法。

image

49. 点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

50. 在弹出的模拟器中,再次点击此处的按钮,以弹出一个警告窗口。

51. 当前弹出了一个警告窗口,窗口中包含了标题、子标题和图标,该图标采用的是项目中的一张图片。点击确定按钮,关闭弹出窗口。

image

52. 最后点击此处的[停止]按钮,关闭模拟器,并结束本节课程。

image

image

本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

apps8 2.png

相关文章

网友评论

  • IT人故事会:做开发很累,还的学习,之前你这个我也碰到过,但是没记录谢谢了

本文标题:1.14 使用SweetAlert制作漂亮的自定义Alert窗口

本文链接:https://www.haomeiwen.com/subject/wnozhftx.html