• SweetAlert


    SweetAlert是一款使用纯js制作的消息警告框插件。这款消息警告框插件能够很容易的在警告框中插入图片、动画等元素,是替代原生消息警告框的最佳选择。

    使用方法
    要使用该插件,首先要在html的header中引入以下文件:

    <script src="lib/sweet-alert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">


    最基本的调用方法:
    sweetAlert("Hello world!");


    带错误图标的警告框:
    sweetAlert("Oops...", "Something went wrong!", "error");


    一个带有确认按钮的警告框,点击确认按钮可触发动画:
    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。
  • 相关阅读:
    程序自动网站留言,自动登录,自动投票等做法 httpclient 拂晓风起
    CruiseControl 安装 配置 教程 实例 搭建服务器 (CruiseControl + git/svn) 拂晓风起
    编码和字符集的关系 拂晓风起
    PuttyGen生成SSH(key) 带图 TortoiseGit和Github的SSH生成 拂晓风起
    计算时间差,将yyyyMMddHHmmss字符格式转为时间
    C# 操作非标准的xml文件
    SqlServer2000中调度包到作业中,自动执行失败的解决方法
    ReSharper 命名规则
    Js中setInterval、setTimeout不能传递参数问题 及各自的关闭方法
    获取存储过程返回值
  • 原文地址:https://www.cnblogs.com/eaysun/p/4742065.html
Copyright © 2020-2023  润新知