JS插件补充

合集 - Django炒面(23)

1.Django框架之web框架优化2024-03-282.Django框架之python后端框架介绍2024-03-283.Django框架之Django的安装与使用2024-03-284.Django框架之小白必会三板斧2024-03-285.Django框架之静态文件2024-03-286.Django框架之request对象2024-03-287.Django框架之ORM操作2024-04-068.Django框架之请求生命周期流程图2024-04-069.Django框架之路由层2024-04-0610.Django框架之视图层2024-04-0711.Django框架之模板层2024-04-0712.Django框架之模型层2024-04-0713.Django框架之Ajax基础2024-04-0714.Django框架之Ajax进阶2024-04-08

15.JS插件补充2024-04-08

16.Django框架之序列化组件2024-04-0817.Django框架之批量插入数据2024-04-0818.Django框架之分页器使用2024-04-0819.Django框架之form组件2024-04-0820.Django框架之Cookie和Session2024-04-0821.Django框架之中间件2024-04-0922.Django框架之auth模块2024-04-0923.Django便捷函数shortcuts2024-04-09

收起

一、SweetAlert

1、介绍

• SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹窗效果。
• SweetAlert 提供了多种弹窗风格和动画效果，可以用于警告、确认、提示和错误等不同的场景。

2、特点

（1）漂亮的外观

SweetAlert创建的弹窗外观美观、现代，比浏览器原生弹窗更具吸引力。

（2）易于使用

使用SweetAlert非常简单，只需几行代码即可创建弹窗，而且提供了丰富的选项供定制。

（3）定制性强

SweetAlert支持自定义弹窗的标题、文本、按钮文本、图标等各个方面，可以根据需求定制弹窗样式。

（4）丰富的交互选项

除了简单的警告和确认弹窗外，SweetAlert还支持输入框、下拉框等更复杂的交互组件。

（5）动画效果

SweetAlert提供了丰富的动画效果，可以为弹窗添加动画使用户体验更加生动。

（6）响应式设计

SweetAlert弹窗具有响应式设计，可以自动适应不同屏幕尺寸，确保在各种设备上显示良好。

3、使用

（1）引入SweetAlert库

<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

（2）官网链接

• SweetAlert1官网：SweetAlert
• SweetAlert2官网：SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

（3）ajax结合sweetalert实现删除按钮的二次确认

$("#b55").click(function () {
    swal({
        title: "你确定要删除吗？",
        text: "删除可就找不回来了哦！",
        type: "warning",
        showCancelButton: true,  // 是否显示取消按钮
        confirmButtonClass: "btn-danger",  // 确认按钮的样式类
        confirmButtonText: "删除",  // 确认按钮文本
        cancelButtonText: "取消",  // 取消按钮文本
        closeOnConfirm: false,  // 点击确认按钮不关闭弹框
        showLoaderOnConfirm: true  // 显示正在删除的动画效果
    },
         function () {
        var deleteId = 2;
        $.ajax({
            url: "/delete_book/",
            type: "post",
            data: {"id": deleteId},
            success: function (data) {
                if (data.code === 0) {
                    swal("删除成功!", "你可以准备跑路了！", "success");
                } else {
                    swal("删除失败", "你可以再尝试一下！", "error")
                }
            }
        })
    });
})

• 上面这个二次确认的动态框样式，你也可以直接应用到你的项目中
• sweetalert针对中文可能会出现展示不全的现象，自己找到对应的标签书写css修改样式即可

（4）提醒事项

• 1.上述的样式类部分渲染的样式来自于bootstrap中，所有建议在使用上述样式时，将bootstrap的js和css也导入了，这样的情况下，页面效果就不会有任何问题
• 2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可通过调整字体的上外边距来解决

二、layer

1、介绍

• layer 是一款近年来备受青睐的 web 弹层组件，可轻松实现 Alert / Confirm / Prompt / 普通提示 / 页面区块 / iframe / tips 等等几乎所有的弹出交互。
• layer 使用更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性。

2、官网

• layer 弹出层组件 - jQuery 弹出层插件 (layui.dev)

3、安装配置

• （1）layer 库下载并解压后，将整个 layer 文件夹放到项目中来，这里面除了 js 库外还自带了一套默认皮肤。
• （2）接着在需要使用 layer 的页面中将 layer.js 引入即可。同时由于其依赖 jQuery，我们还需要引入 jQuery。