那些年，超級好用的前端工具！
阿新 • • 發佈：2018-12-13
那些年我推薦的前端框架
-
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>