标签：cdata   高度定制   图标   单位   bow   ati   value   删除   section   

SweetAlert中文

Sweet Alert

完美得无可替代

下载

那么……它都能做什么呢？

让我们来比较看一下错误消息的显示。第一个使用了内置的alert，第二个使用了sweetAlert。

alert("哎呦……出错了！");

sweetAlert("哎呦……", "出错了！","error");

非常漂亮吧？无论你是在电脑、手机还是平板上，SweetAlert都会在页面上自动居中显示，这看起来非常棒。SweetAlert还可高度定制，正如下面你所看到的。

示例

在这些实例中，我们使用了简称函数swal调用sweetAlert。

• 基本信息弹窗

  尝试一下

  swal("这是一条信息！")

• 标题与文本的信息弹窗

  尝试一下

  swal("这是一条信息！", "很漂亮，不是吗？")

• 成功信息弹窗！

  尝试一下

  swal("干得漂亮！", "你点击了按钮！","success")

• 警告信息弹窗，“确认”按钮带有一个函数……

  尝试一下

  				swal({ 
  				  title: "确定删除吗？", 
  				  text: "你将无法恢复该虚拟文件！", 
  				  type: "warning",
  				  showCancelButton: true, 
  				  confirmButtonColor: "#DD6B55",
  				  confirmButtonText: "确定删除！", 
  				  closeOnConfirm: false
  				},
  				function(){
  				  swal("删除！", "你的虚拟文件已经被删除。", "success"); 
  				});
  			

• …… 给函数传入参数，"取消"按钮也可以执行。

  尝试一下

  				swal({ 
  				  title: "确定删除吗？", 
  				  text: "你将无法恢复该虚拟文件！", 
  				  type: "warning",
  				  showCancelButton: true, 
  				  confirmButtonColor: "#DD6B55",
  				  confirmButtonText: "确定删除！", 
  				  cancelButtonText: "取消删除！",
  				  closeOnConfirm: false, 
  				  closeOnCancel: false				
  				},
  				function(isConfirm){ 
  				  if (isConfirm) { 
  				    swal("删除！", "你的虚拟文件已经被删除。",
  				"success"); 
  				  } else { 
  				    swal("取消！", "你的虚拟文件是安全的:)",
  				"error"); 
  				  } 
  				});
  			

• 自定义图标信息弹窗

  尝试一下

  				swal({ 
  				  title: "漂亮！", 
  				  text: "这是自定义图标。",
  				  imageUrl: "images/thumbs-up.jpg" 
  				});
  			

• HTML信息弹窗

  尝试一下

  				swal({ 
  				  title: "HTML <small>标题</small>!",
  				  text: "自定义<span style="color:#F8BB86">html<span>信息。", 
  				  html: true 
  				});
  			

• 定时关闭信息弹窗

  尝试一下

  				swal({ 
  				  title: "自动关闭弹窗！", 
  				  text: "2秒后自动关闭。", 
  				  timer: 2000, 
  				  showConfirmButton: false 
  				});
  			

• 输入信息弹窗

  尝试一下

  				swal({ 
  				  title: "输入！", 
  				  text: "输入一些有趣的话：",
  				  type: "input", 
  				  showCancelButton: true, 
  				  closeOnConfirm: false, 
  				  animation: "slide-from-top", 
  				  inputPlaceholder: "输入一些话" 
  				},
  				function(inputValue){ 
  				  if (inputValue === false) returnfalse; 
  				  
  				  if (inputValue === "") { 
  				    swal.showInputError("你需要输入一些话！");
  				    return false 
  				  } 
  				  
  				  swal("非常好！", "你输入了：" + inputValue,"success"); 
  				});
  			

• 加载(AJAX请求示例)弹窗

  尝试一下

  				swal({ 
  				  title: "Ajax请求示例", 
  				  text: "提交运行ajax请求", 
  				  type: "info", 
  				  showCancelButton: true, 
  				  closeOnConfirm: false, 
  				  showLoaderOnConfirm: true, 
  				},
  				function(){ 
  				  setTimeout(function(){ 
  				    swal("Ajax请求完成！"); 
  				  }, 2000);
  				});
  			

• 你可以改变SweetAlert的主题样式!

  尝试一下

  				<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
  				<link rel="stylesheet" type="text/css" href="themes/twitter.css">
  			

下载 & 安装

$ bower install sweetalert

$ npm install sweetalert

方式 3：下载sweetAlert的CSS和JavaScript文件。

下载文件

1. 引用必要的文件初始化插件：

   				<script src="dist/sweetalert.min.js"></script> 
   				<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
   			

2. 页面加载完成后调用sweetAlert函数

   				swal({ 
   				  title: "Error!", 
   				  text: "Here‘s my error message!",
   				  type: "error", 
   				  confirmButtonText: "Cool" 
   				});
   			

配置

你可以使用这些参数，通过一个对象传入到sweetAlert中：

方法

SweetAlert还带有一些简单的方法，你可以调用它们：

原文来自于http://mishengqiang.com/sweetalert/

sweetAlert弹窗

标签：cdata   高度定制   图标   单位   bow   ati   value   删除   section   

原文地址：http://www.cnblogs.com/zsy0712/p/7239883.html