Checkbox berguna ketika ingin memilih sesuatu secara multiple, contohnya saja seperti memilih menu makanan online lebih simple nya dengan checkbox.
Tampilan checkbox hanya itu-itu saja, berbentuk kotak dan ketika di klik langsung muncul ceklis. Semakin lama semakin bosan dengan bentuk checkbox yang gitu saja, nah di artikel kali ini, saya akan membagikan cara membuat toggle switch dark mode dan light mode dengan checkbox dan tentu saja saya akan buat custom checkbox juga.
langsung kita ke tutorial nya.
- Pertama kalian buat dulu file html dan css, terserah mau kasih nama apa saja asal ekstensinya .html dan .css .
- Setelah file html kalian buat, kalian bisa isi dengan source code berikut.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <label class="label-check"> <input type="checkbox" id="check"> <span class="checkmark"></span> </label> </div> <div class="body"> <span></span> </div> </body> </html>
kita buat source code html dengan mengetikan code di atas, tapi jika kalian menggunakan text editor sublime atau vscode kalian tinggal mengetik tanda seru '!' kemudian tekan 'tab' dan otomatis file html kalian sudah terbuat.
Pada bagian
<link rel="stylesheet" href="style.css">
ini untuk menghubungkan file css secara external. Kemudian di bagian <body< saya tambahkan
<div class="wrapper"> <label class="label-check"> <input type="checkbox" id="check"> <span class="checkmark"></span> </label> </div>
class wrapper itu akan berguna sebagai pembungkus dari checkbox tersebut dan di dalam wrapper kita isi dengan label dan checkbox. Nah disini saya akan jelaskan sedikit, kenapa label dan inputnya seperti itu. label biasanya ditulis seperti ini <label for="id">label</label> kenapa diatas tidak ? saya menggabungkan label dengan checkbox agar tidak lagi menggunakan for. udah gitu aja :D.
di bagian
<div class="body"> <span></span> </div>
ini saya buat untuk memberitahukan bahwa kita switch ke mode apa. (Note: hanya untuk memperindah saja).
coba kalian buka di browser kalian, dan tampilannya kira-kira hanya checkbox kosong yang tidak ada apa apanya.
- Selanjutnya kalian tinggal buka file css kalian dan isi dengan source berikut.
body { margin:0; padding: 0; width: 100%; height: 100vh; } .wrapper { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .label-check input{ display: none; } .label-check { position: relative; width: 200px; height: 100px; cursor: pointer; } .label-check .checkmark { width: 100%; height: 100%; border: 2px solid #333; background: #333; border-radius: 50px; position: absolute; transition: .5s; } .label-check .checkmark::before { content:""; width: 44%; height: 94%; background: #333; position: absolute; border-radius: 50%; top: 0; left: 0; margin: 3px; transition: .5s; background: #fff; } .label-check input:checked + .checkmark{ background: #fff; } .label-check input:checked + .checkmark::before{ transform: translateX(106px); background: #333; } .active { width: 100%; height: 100%; position: absolute; z-index: 10; } .dark{ display: flex; width: 100%; height:100%; background: #333; color: #fff; align-items: center; justify-content: center; transition: .3s; } .dark span { font-size: 100px; font-family: sans-serif; } .light{ display: flex; width: 100%; height:100%; background: #fff; color: #333; align-items: center; justify-content: center; transition: .3s; } .light span { font-size: 100px; font-family: sans-serif; }
- save kemudian buka lagi browser kalian dan refresh. Tampilan untuk custom checkboxnya sudah selesai sampai di sini tinggal kalian atur sendiri untuk warna background dan juga size checkbox sesuai yang kalian inginkan.
Tapi untuk membuat toggle switch dark mode dan light mode dengan checkbox belum cukup sampai disini. Kita lanjut ke bagian berikutnya.
- di bagian ini saya akan menggunakan jQuery untuk membuat tampilan dan mengubah warna dari body. Tambahkan source berikut sebelum </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> $(function() { $('#check').change(function() { let body = $('body'); let childBody = $('.body'); if($(this).is(':checked')) { childBody.addClass('active'); childBody.addClass('dark'); childBody.find('span').html('DARK MODE'); body.css('background', '#333'); setTimeout(function(){ childBody.removeClass('active'); childBody.removeClass('dark'); childBody.find('span').html(""); }, 2000); }else { childBody.addClass('active'); childBody.addClass('light'); childBody.find('span').html('LIGHT MODE'); body.css('background', '#fff'); setTimeout(function(){ childBody.removeClass('active'); childBody.removeClass('light'); childBody.find('span').html(""); }, 2000); } }) }) </script>
PENJELASAN:
pada bagian
<script> $('#check').change(function() { let body = $('body'); let childBody = $('.body'); </script>
saya membuat variable body untuk mengubah warna body-nya, nanti ketika di switch akan berubah warna background body nya.
Pada childBody saya buat sebagai popup mode agar terlihat menarik aja. nah untuk bagian ini
if($(this).is(':checked')) { childBody.addClass('active'); childBody.addClass('dark'); childBody.find('span').html('DARK MODE'); body.css('background', '#333');
jika $(this)/#check/checkbox(html) sudah checked, maka tambahkan class active dan dark dari css, lalu tambahkan juga tulisan DARK MODE untuk mengetahui kita mau switch ke dark mode dan jangan lupa ubah warna body nya menjadi dark.
setelah itu jangan lupa tambahkan timeout.
setTimeout(function(){ childBody.removeClass('active'); childBody.removeClass('dark'); childBody.find('span').html(""); }, 2000);
hapus semua class dan untuk bagian span kosongkan saja, untuk waktu saya kasih 2000ms atau sama dengan 2s.
sampai disini tutorialnya sudah selesai, untuk demo silahkan lihat di bawah ini.
Demikianlah tutorial cara toggle dark dan night mode dengan checkbox HTML, CSS, JQuery.
0 comments:
Posting Komentar