那些年我用過的前端插件合集

FontAwesome字體

Font Awesome

詳細用法參見上述站點的Examples。

SweetAlert系列

示例：

基本使用：

swal("標題","內容","success);

使用SweetAlert在Ajax提交成功（done）或失敗（error）時分別提示不用的內容。

這是更新之前版本的寫法

function deleteRecord(recordID) {
    swal({
        title: "確定要刪除這個產品嗎？",
        text: "刪除后可就無法恢復了。",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "是的，我要刪除！",
        confirmButtonColor: "#ec6c62",
        cancelButtonText: "容我三思"
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            type: "post",
            url: "/delete/",
            data: {"id": recordID},
            success: function (data) {
                var dataObj = $.parseJSON(data);
                if (dataObj.status === 0) { //后端刪除成功
                    swal("刪除成功", dataObj.info, "success");
                    $("#p-" + recordID).remove()  //刪除頁面中那一行數據
                } else {
                    swal("出錯啦。。。", dataObj.msg, "error");  //后端刪除失敗
                }
            },
            error: function () {  // ajax請求失敗
                swal("啊哦。。。", "服務器走丟了。。。", "error");
            }
        })
    });
}

更新之后用這么寫

swal({
  title: "這里寫標題",
  text: "這里放內容",
  icon: "warning",  // 這里放圖標的類型（success,warning,info,error）
  buttons: {
    cancel: {
      text: "容我三思",
      visible: true,
      value: false
    },
    confirm: {
      text: "我就是要刪除"
    }
  }
}).then(function (isConfirm) {
    if (isConfirm){
      swal("你死定了", {button: "確認"});
    }

Toastr通知

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端常用js插件 VSCode 前端常用插件前端常用的插件網站前端開發VScode常用插件 vscode 前端常用插件推薦 VSCode 前端常用插件集合 vscode 前端常用插件推薦 VSCode 前端常用插件集合常用的前端相關chrome插件網站前端常用插件整理