zoukankan      html  css  js  c++  java
  • js-jquery-SweetAlert【一】使用

    一、下载安装

    地址:http://t4t5.github.io/sweetalert/

    二、页面引用

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

    当然还有jquery

    三、示例

    3.1、基础结构

    <link rel="stylesheet" type="text/css" href="sweetalert.css">
    <script src="jquery.min.js"></script> 
    <script src="sweetalert.min.js"></script> 
    <script>
    window.onload=function(){
        swal("Here's a message!");//以下代码主要修改这里
    }
    </script>

    3.2、精简用法

    1、标题【alert】-swal(string)

    swal("Here's a message!")

    2、标题和描述【alert】-swal(string,string)

    swal("Title","des")

    3.标题、描述、成功【alert】-swal(string,string,string)

    swal("Good job!", "You clicked the button!", "success")

    3.2、标准用法

    4、确认框【confirm】-swal(object)

    swal({   
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false 
    });

    其他参数见下表备注

    5、确认框【confirm】-swal(object,function())

    swal({   
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false 
    },
    function(){   
        swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
    });

    6、确认框【confirm】-swal(object,function(parameter))

    参数含义:是否确认isConfirm

    swal({
       title: "Are you sure?",
       text: "You will not be able to recover this imaginary file!",
       type: "warning",
       showCancelButton: true,
       confirmButtonColor: "#DD6B55",
       confirmButtonText: "Yes, delete it!",
       cancelButtonText: "No, cancel plx!",
       closeOnConfirm: false,
       closeOnCancel: false 
    }, 
    function(isConfirm){
       if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else { 
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });

     3.4、确认输出框

    7、确认输出框确认框【confirm】-swal(object,function(parameter))

    注意:type:input

    swal({
        title: "An input!",
        text: "Write something interesting:",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "Write something"
    }, function (inputValue) {
        if (inputValue === false) return false;
        if (inputValue === "") {
            swal.showInputError("You need to write something!");
            return false
        }
        swal("Nice!", "You wrote: " + inputValue, "success");
    });

    3.5、ajax

    8、ajax请求

    swal({
        title: "Ajax request example",
        text: "Submit to run ajax request",
        type: "info",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
    }, function () {
        setTimeout(function () {
            swal("Ajax request finished!");
        }, 2000);
    });
    
    
  • 相关阅读:
    C++细节决定成败---菜鸡程序员被前辈蹂躏历程(持续更新)
    VIM杂记——基本使用
    UE4——用Android Studio打开UE4工程
    UE4——打包时遇到Could not determine java version from 'xx.x.x'的问题
    HTML笔记——常用标签总结
    LeetCode——142. Linked List Cycle II
    Leetcode——344. Reverse String
    UE4 隐藏虚拟摇杆
    UE4——实现走近物件其上方出现互动按钮并弹出UMG的功能
    UE4——调用API实现布娃娃死亡效果
  • 原文地址:https://www.cnblogs.com/bjlhx/p/6695393.html
Copyright © 2011-2022 走看看