
ShowMessage对delphi开发人员而言,是个非常熟悉的玩意,常常需要在软件上做一些合适的提醒,以达到更好的用户体验。今天我们来介绍一下网站里的提示框,也就是JavaSciprt中的alert,同时也介绍一下如何使用三方的js插件,来达到更好的效果。
首先,我们来看一下JavaScript的alert代码和效果,如下:
<script type="text/javascript">
alert('hello world!');
</script>
这就是js基本的提示框样式了,比较简单,我们一般在调试时用来输出一些数据用用,正式场合一般不用,所以就这样简单的盖过吧。
推荐一个三方的js插件,名字叫sweetalert,官网地址是 http://t4t5.github.io/sweetalert/ github地址是 https://github.com/t4t5/sweetalert ,简单介绍一下它的用法和效果,如下:
首先,讲下如何安装sweetalert,非常简单,只要在页中引用它的js和css就可以了,代码如下:
<script src="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert-dev.min.js"></script>
<link href="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
我这里是引用的cdn上的链接,你也可以去官网下载到本地,引用本地文件。然后就可以开始调用它了,代码如下:
<script type="text/javascript">
swal("Hello world!");
</script>
也就是把alert直接替换成swal就行了,是不是很简单?效果如下:
当然还有询问提示框等应用方式,比如询问是否进行删除操作,代码和效果如下:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
其它的一些用法,请参考官网的介绍,今天是否学会如何为您的网站或者应用页增加提示框了呢?网上还有很多类似的js插件,可以像delphi的vcl一样帮您解决很多问题,增加开发效率。