Baca Juga :  45 Template Blogger Gratis Terbaik

Mengubah Background DIV menggunakan Bootstrap Colorpicker

1 536

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 kami mudah untuk mendapatkan warna dari panel warna alih-alih menekan kode warna.

Dalam contoh ini, saya mengikat elemen button HTML dengan pemilih warna Bootstrap. Saya memanggil pemilih warna dengan referensi elemen button. 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. Dalam tutorial sebelumnya, saya telah membuat contoh untuk mengubah latar belakang DIV secara dinamis ketika scroll halaman.

Kode HTML untuk Menampilkan ColorPicker

Kode HTML ini berisi elemen DIV dan button. Elemen button akan terikat dengan Bootstrap Colorpicker. Pengikatan ini akan dilakukan pada peristiwa klik button ini 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.

<link rel="stylesheet" href="bootstrap-colorpicker.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-colorpicker.js"></script>
<div class="row">
<p>Mengubah Background DIV menggunakan Bootstrap Colorpicker</p>
<div id="div-bg"></div>
<button id="btn-color-picker" class="btn btn-primary btn-md">
<img src="ic_color_lens.png" />
</button>
</div>

Dan Stylenya,

Baca Juga :  Membuat jQuery pada Animasi Scroll Color Background
<style>
#div-bg {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: inline-block;
    box-sizing: border-box;
}

#btn-color-picker {
    background: none;
    border: #000 1px solid;
    padding: 2px;
    cursor: pointer;
}
</style>

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.

<script type="text/javascript"
	$('#btn-color-picker').colorpicker();
	$('#btn-color-picker').colorpicker().on(
			'changeColor',
			function() {
				$('#div-bg').css('background-color',
						$(this).colorpicker('getValue', '#ffffff'));
			});
</script>

Output Colorpicker Bootstrap

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

Demo

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] Previous story Mengubah Background DIV menggunakan Bootstrap Colorpicker […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.