Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Mengubah Background DIV menggunakan Bootstrap Colorpicker. Bootstrap Colorpicker adalah widget GUI yang dapat digunakan untuk menampilkan palet warna untuk memilih warna. Ini adalah plugin Bootstrap berbasis jQuery. Menggunakan plugin ini, elemen HTML akan terikat untuk menampilkan pemilih warna. Kita dapat dengan mudah menerapkan color picker dalam aplikasi kita menggunakan perpustakaan Bootstrap ini. Itu membuat pekerjaan kita lebih mudah untuk mendapatkan warna dari panel warna dengan hanya menekan kode warna.

Dalam contoh ini, saya mengkaitkan elemen tombol HTML dengan pemilih warna Bootstrap. Saya memanggil pemilih warna dengan referensi elemen tombol. Saat mengklik tombol ini, panel warna akan ditampilkan kepada pengguna untuk memilih warna. Saya menggunakan Bootstrap Colorpicker untuk mengubah warna latar belakang elemen DIV secara dinamis.

Kode HTML untuk Menampilkan Pilihan Warna

Kode HTML ini berisi elemen DIV dan tombol. Elemen tombol akan terikat dengan Bootstrap Colorpicker. Ini akan dilakukan pada event klik tombol , untuk menampilkan pemilih warna. Saat memilih warna, maka itu akan diterapkan sebagai warna latar belakang elemen DIV.

Unduh library Bootstrap Colorpicker dan sertakan dependensi JavaScript dan CSS yang diperlukan dalam HTML Anda.

 

Gunakan style css di bawah ini

Mengubah Background DIV menggunakan Bootstrap Colorpicker

Dalam skrip sederhana ini, fungsi pustaka Colorpicker diinisialisasi dengan memperhatikan pemilih id elemen tombol. Elemen tombol menampilkan ikon pemilih warna. Pada mengklik ikon tombol ini, panel warna akan ditampilkan kepada pengguna. Ketika pengguna memilih warna, maka latar belakang DIV diubah menggunakan fungsi jQuery css (). Proses pengubahan warna akan dilakukan pada acara changecolor dari elemen widget colorpicker.

 

Output Colorpicker Bootstrap

Screenshot ini menunjukkan colorpicker dan latar belakang yang berubah dari elemen DIV target.

Mengubah Background DIV menggunakan Bootstrap Colorpicker

Oke itulah tadi pembahasan saya tentang Mengubah Background DIV menggunakan Bootstrap Colorpicker, semoga bermanfaat.

WhatsApp chat