那些年我推荐的前端框架

FontAwesome字体

http://www.fontawesome.com.cn/faicons/ 4.7.0 版本！

SweetAlert系列

SweetAlert https://github.com/t4t5/sweetalert

SweetAlert2 https://github.com/limonte/sweetalert2

SweetAlert 到 SweetAlert2 升级指南 https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

 1 function deleteRecord(recordID) {
 2     swal({
 3         title: "确定要删除这个产品吗？",
 4         text: "删除后可就无法恢复了。",
 5         type: "warning",
 6         showCancelButton: true,
 7         closeOnConfirm: false,
 8         confirmButtonText: "是的，我要删除！",
 9         confirmButtonColor: "#ec6c62",
10         cancelButtonText: "容我三思"
11     }, function (isConfirm) {
12         if (!isConfirm) return;
13         $.ajax({
14             type: "post",
15             url: "/delete/",
16             data: {"id": recordID},
17             success: function (data) {
18                 var dataObj = $.parseJSON(data);
19                 if (dataObj.status === 0) { //后端删除成功
20                     swal("删除成功", dataObj.info, "success");
21                     $("#p-" + recordID).remove()  //删除页面中那一行数据
22                 } else {
23                     swal("出错啦。。。", dataObj.msg, "error");  //后端删除失败
24                 }
25             },
26             error: function () {  // ajax请求失败
27                 swal("啊哦。。。", "服务器走丢了。。。", "error");
28             }
29         })
30     });
31 }

更新之后用这么写

 1 swal({
 2   title: "这里写标题",
 3   text: "这里放内容",
 4   icon: "warning",  // 这里放图标的类型（success,warning,info,error）
 5   buttons: {
 6     cancel: {
 7       text: "容我三思",
 8       visible: true,
 9       value: false
10     },
11     confirm: {
12       text: "我就是要删除"
13     }
14   }
15 }).then(function (isConfirm) {
16     if (isConfirm){
17       swal("你死定了", {button: "确认"});
18     }

Toastr通知

Toastr https://codeseven.github.io/toastr/

toastr["success"]("你已经成功被绿!")

jQueryLazyload懒加载

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

模板

Metronic

那些年，超级好用的前端工具！

那些年我推荐的前端框架

FontAwesome字体

http://www.fontawesome.com.cn/faicons/ 4.7.0 版本！

SweetAlert系列

Toastr通知

jQueryLazyload懒加载

模板

http://metronic.kp7.cn/

猜你喜欢