• sweetalert------一个非常萌的alert!


    今天逛github的时候发现一个非常萌的alert,比IE和各大浏览器的原alert美多惹。

    github项目地址:https://github.com/t4t5/sweetalert

    通过git clone到本地

    项目本身也有一个非常Nice的说明文档,跟着操作就能看懂各种做好的萌萌哒的alert了。

    参考:https://www.ludu.co/lesson/how-to-use-sweetalert

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index1</title>
      <script type="text/javascript" src="sweetalert.min.js"></script>
      <link rel="stylesheet" href="sweetalert.css">
    </head>
    <body>
    <script>
       //sweetAlert("Hello world!")
       sweetAlert({
         title: "Oops!",
         text: "Something went wrong on the page!",
         type: "error"
       });
    
    </script>
    </body>
    </html>

    配合jQuery还可以设置其他的alert哦

    <button class="delete-photo" data-photo-id="56">Delete photo</button>
    
    
       <script>
       $('button.delete-photo').click(function() {
         var photoId = $(this).attr("data-photo-id");
         deletePhoto(photoId);
       });
    
       function deletePhoto(photoId) {
         swal({
           title: "Are you sure?",
           text: "Are you sure that you want to delete this photo?",
           type: "warning",
           showCancelButton: true,
           closeOnConfirm: false,
           confirmButtonText: "Yes, delete it!",
           confirmButtonColor: "#ec6c62"
         }, function() {
           $.ajax({
             url: "/api/photos/" + photoId,
             type: "DELETE"
           })
             .done(function(data) {
               swal("Deleted!", "Your file was successfully deleted!", "success");
             })
             .error(function(data) {
               swal("Oops", "We couldn't connect to the server!", "error");
             });
         });
       }
    </script>

  • 相关阅读:
    Java内置包装类
    for循环思路题
    常用函数
    函数
    冒泡排序
    数组的运用
    for循环中有意思的练习题。
    for循环
    运算中容易出现的错误
    分支的运用
  • 原文地址:https://www.cnblogs.com/chaoquan/p/7447960.html
Copyright © 2020-2023  润新知