SweetAlert-js超酷消息警告框插件

2017-9-1 亿零 插件下载

QQ截图20170901103610.png


使用方法

要使用该插件,首先要在header中引入以下文件(已打包附件内,上传注意是模版文件夹下路径):

<script src="<?php echo TEMPLATE_URL; ?>js/sweetalert.min.js"></script>
<link rel="stylesheet" href="<?php echo TEMPLATE_URL; ?>css/sweetalert.css" type='text/css' media='all' />
四种图标及调用方式:
swal("温馨提示!", "这是一个感叹号的提示","info");
swal("警告", "这是一个警告的提示","warning");
swal("错误提示", "这是一个错误的提示","error");
swal("完成", "这是一个完成的提示","success");

完整的SweetAlert代码

sweetAlert({
  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");
});

可用参数

参数 默认值 描述
title null(required) 窗口的名称。可以通过对象的"title"属性或第一个参数进行传递
text null 窗口的描述。可以通过对象的"text"属性或第二个参数进行传递
type null 窗口的类型。SweetAlert 有4种类型的图标动画:"warning", "error", "success" 和 "info".可以将它放在"type"数组或通过第三个参数传递
allowOutsideClick
false
如果设置为“true”,用户可以通过点击警告框以外的区域关闭警告框
showCancelButton
false 如果设置为“true”,“cancel”按钮将显示,点击可以关闭警告框
confirmButtonText
"OK"
该参数用来改变确认按钮上的文字。如果设置为"true",那么确认按钮将自动将"Confirm"替换为"OK"
confirmButtonColor
"#AEDEF4"
该参数用来改变确认按钮的背景颜色(必须是一个HEX值)
cancelButtonText
"Cancel"
该参数用来改变取消按钮的文字
closeOnConfirm
true 如果希望以后点击了确认按钮后模态窗口仍然保留就设置为"false"。该参数在其他SweetAlert触发确认按钮事件时十分有用
imageUrl
null
添加自定义图片到警告框上。必须是图片的完整路径
imageSize
"80x80"
当设定图片的路径后,你可以设定图片的大小,格式为两个数字中间带个"x"符号
timer
null
警告框自动关闭的时间。单位是ms

原文地址:jQuery之家

链接: 传送门 密码: a8rn

标签: 建站 emlog 插件

评论:

http://cbi.as/8ifv2
2018-01-06 13:51
Nice post. I learn something tougher on different blogs everyday. It would all the time be stimulating to read content from different writers and follow somewhat one thing from their store. I抎 prefer to make use of some with the content material on my blog whether or not you don抰 mind. Natually I抣l offer you a link in your internet blog. Thanks for sharing.

发表评论:

Powered by emlog 陕ICP备16016230号