Widget HTML #1

Beranda / HTML / JavaScript

Membuat Toast Notification dengan jQuery yang Berwarna dan Bisa Diatur Posisi Tampilnya

Posting Komentar

Halo, teman-teman! Hari ini kita akan belajar bagaimana caranya membuat toast notification yang cantik dan berwarna dengan menggunakan jQuery, dan tentu saja kita akan membuatnya bisa muncul di posisi yang bisa diatur sesuai keinginan. Jadi, buat teman-teman yang baru mulai belajar jQuery, tenang saja, kita akan kupas satu per satu langkahnya dengan sangat sederhana dan jelas. Yuk, langsung kita mulai!

Apa itu Toast Notification?

Sebelum kita lanjut ke tutorialnya, buat teman-teman yang belum familiar, toast notification adalah sebuah notifikasi kecil yang biasanya muncul di sudut layar dan menghilang sendiri setelah beberapa saat. Contohnya, ketika kita sukses melakukan sesuatu seperti menyimpan data, atau ketika ada error, aplikasi akan menampilkan pesan kecil ini tanpa harus mengganggu tampilan keseluruhan halaman.

Toast biasanya digunakan untuk memberikan informasi singkat kepada pengguna, seperti konfirmasi atau peringatan.

Langkah 1: Menyiapkan HTML Dasar

Langkah pertama dalam membuat toast notification adalah menyiapkan HTML dasar. Dalam contoh ini, kita akan membuat tiga tombol yang bisa memicu toast untuk menampilkan pesan sukses, error, dan info. Selain itu, kita akan membuat sebuah dropdown yang memungkinkan kita mengatur di mana posisi toast akan muncul.

Berikut ini kode HTML yang akan kita gunakan:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Toast with jQuery</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="toast-container"></div>

    <button id="show-success">Show Success Toast</button>
    <button id="show-error">Show Error Toast</button>
    <button id="show-info">Show Info Toast</button>

    <select id="toast-position">
        <option value="top-right">Top Right</option>
        <option value="top-left">Top Left</option>
        <option value="bottom-right">Bottom Right</option>
        <option value="bottom-left">Bottom Left</option>
    </select>

    <script src="scripts.js"></script>
</body>
</html>

Langkah 2: Menyiapkan CSS untuk Styling

Sekarang, kita akan menulis sedikit CSS untuk membuat tampilan toast kita lebih menarik dan tentu saja agar tampil di posisi yang tepat. Kita akan memberikan warna yang berbeda untuk tiap jenis toast: hijau untuk sukses, merah untuk error, dan biru untuk info.


body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

#toast-container {
    position: fixed;
    z-index: 9999;
    padding: 10px;
}

#toast-container.top-right {
    top: 20px;
    right: 20px;
}

#toast-container.top-left {
    top: 20px;
    left: 20px;
}

#toast-container.bottom-right {
    bottom: 20px;
    right: 20px;
}

#toast-container.bottom-left {
    bottom: 20px;
    left: 20px;
}

.toast {
    display: none;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    width: 250px;
    text-align: center;
}

.toast-success {
    background-color: #4CAF50;
}

.toast-error {
    background-color: #f44336;
}

.toast-info {
    background-color: #2196F3;
}

button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button#show-success {
    background-color: #4CAF50;
    color: white;
}

button#show-error {
    background-color: #f44336;
    color: white;
}

button#show-info {
    background-color: #2196F3;
    color: white;
}

#toast-position {
    margin-top: 20px;
    padding: 5px;
    font-size: 16px;
}

Langkah 3: Menambahkan Interaktivitas dengan jQuery

Sekarang, mari kita buat toast kita bisa tampil menggunakan jQuery. Kita akan membuat fungsi yang bisa menampilkan toast berdasarkan jenis notifikasi dan posisinya.


$(document).ready(function() {
    function showToast(type, message) {
        const toast = $('
').addClass(`toast-${type}`).text(message);

        const position = $('#toast-position').val();
        const toastContainer = $('#toast-container');

        // Hapus kelas posisi sebelumnya dan tambahkan posisi baru
        toastContainer.removeClass('top-right top-left bottom-right bottom-left');
        toastContainer.addClass(position);

        toastContainer.append(toast);
        toast.fadeIn(400).delay(3000).fadeOut(400, function() {
            $(this).remove();
        });
    }

    $('#show-success').click(function() {
        showToast('success', 'Operation was successful!');
    });

    $('#show-error').click(function() {
        showToast('error', 'An error occurred.');
    });

    $('#show-info').click(function() {
        showToast('info', 'Here is some information.');
    });
});

Langkah 4: Mencoba Aplikasi

Sekarang, teman-teman bisa coba menjalankan aplikasi ini! Toast akan muncul ketika kita mengklik salah satu tombol, dan akan hilang setelah beberapa detik. Serunya lagi, teman-teman bisa memilih di mana toast akan muncul, apakah di sudut kanan atas, kiri atas, kanan bawah, atau kiri bawah.

Kesimpulan

Nah, teman-teman, selesai sudah tutorial kita hari ini. Kita telah berhasil membuat aplikasi toast notification yang berwarna dan bisa diposisikan di berbagai sudut layar. Semoga teman-teman bisa mengikuti tutorial ini dengan mudah. Dengan sedikit kreativitas, aplikasi ini bisa teman-teman modifikasi sesuai kebutuhan. Mungkin bisa ditambahkan animasi yang lebih keren atau jenis toast lain seperti warning?

Kalau ada pertanyaan, jangan ragu untuk bertanya, ya! Selamat mencoba, dan semoga bermanfaat! Terima kasih sudah mengikuti tutorial ini, teman-teman! 😊

Posting Komentar untuk "Membuat Toast Notification dengan jQuery yang Berwarna dan Bisa Diatur Posisi Tampilnya"

Posting Komentar