[โค้ด] การแจ้งเตือน (Alerts) ด้วย toastr ไลบรารี JS & PHP

by boychawin

May 7, 2021 3,288

[โค้ด] การแจ้งเตือน (Alerts) ด้วย toastr ไลบรารี JS & PHP

toastr เป็นไลบรารี Javascript สำหรับการแจ้งเตือน (Alerts) ใช้งานง่ายมาก และสามารถปรับแต่งและขยายได้ มี 4 สีหลักๆ ให้เลือกไปใช้งานกันครับ

ในตัวอย่างโค้ด PHP จะมีการใช้ GET จะส่งค่าผ่านทาง URL แล้วให้แจ้งเตือนโดยใช้ toastr
นำไปปรับใช้กันนะครับ

ไปลองเล่นกันได้ที่
https://codeseven.github.io/toastr/demo.html

รายละเอียดเครื่องมือ

- toastr is a Javascript library
- HTML5

ตัวอย่าง GET จะส่งค่าผ่านทาง URL

http://localhost/ชื่อโฟลเดอร์/index.php?msg=ข้อความที่ต้องการ

GitHub

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toastr alert | boychawin.com</title>
    <!-- Toastr -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">

    <script src=" https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- Toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
    <script>
        // Command: toastr["success"]("ข้อความ")

        //ตัวนี้จะเอาไว้ set ค่าต่างๆ toastr
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "500000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
    </script>


    <?php
    if (isset($_GET['msg'])) {
        echo "<script type='text/javascript'>toastr.success('" . $_GET['msg'] . "', { timeOut: 100000 })</script>";
        echo "<script type='text/javascript'>toastr.error('" . $_GET['msg'] . "')</script>";
        echo "<script type='text/javascript'>toastr.info('" . $_GET['msg'] . "')</script>";
        echo "<script type='text/javascript'>toastr.warning('" . $_GET['msg'] . "')</script>";
    }
    ?>
</body>

</html>

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toastr alert | boychawin.com</title>
    <!-- Toastr -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">

    <script src=" https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- Toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
    <script>
        // Command: toastr["success"]("ข้อความ")

        //ตัวนี้จะเอาไว้ set ค่าต่างๆ toastr
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "500000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
    </script>


    <?php
    if (isset($_GET['msg'])) {
        echo "<script type='text/javascript'>toastr.success('" . $_GET['msg'] . "', { timeOut: 100000 })</script>";
        echo "<script type='text/javascript'>toastr.error('" . $_GET['msg'] . "')</script>";
        echo "<script type='text/javascript'>toastr.info('" . $_GET['msg'] . "')</script>";
        echo "<script type='text/javascript'>toastr.warning('" . $_GET['msg'] . "')</script>";
    }
    ?>
</body>

</html>