Membuat jQuery Color Picker Warna Standar

0 3

Pada tutorial kali ini adalah untuk melihat bagaimana melakukan pemilihan warna sederhana menggunakan jQuery. Dalam tutorial sebelumnya, kita telah membuat pemilih tanggal dengan menggunakan library UI jQuery. Ada berbagai plugin jQuery yang menyediakan fitur color picker. Tutorial ini memberikan kode contoh sederhana sebagai panduan untuk mulai menulis plugin pemilih warna jQuery Anda sendiri.

Dalam contoh ini, kami menggunakan pemilih CSS untuk menampilkan palet warna. Pada mengklik setiap warna dalam palet, kami menyimpan warna yang dipilih ke pointer untuk diterapkan pada target DIV. Kami menggunakan fungsi jQuery CSS untuk memilih dan menerapkan warna ke DIV target.

Kode HTML untuk Palet Warna

Ini adalah kode HTML untuk menampilkan palet warna untuk memilih warna. Ini menunjukkan empat warna dengan tag DIV terpisah.

<div class="circular-div" id="cyan" onClick="pickColor(this.id);"></div>
 <div class="circular-div" id="magenta" onClick="pickColor(this.id);"></div>
 <div class="circular-div" id="yellow" onClick="pickColor(this.id);"></div>
 <div class="circular-div" id="grey" onClick="pickColor(this.id);"></div> 
 <div id="target" onClick="applyColor();"><span style="font-family: 'Arial';">Klik Untuk Memilih Warna</span></div>
 <div id="pointer"></div>

Dan style nya adalah,

<style type="text/css">
#pointer {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border:#000 1px solid;
	border-radius:50%;
}
.circular-div{padding:20px;width:25px;height:200px;float:left;margin:1px;}
#cyan{background:cyan;}
 #magenta{background:magenta;}
 #yellow{background:yellow;}
 #grey{background:grey;}
#target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}
</style>

jQuery Color Picker Script

Skrip ini berisi sangat sedikit baris untuk menerapkan pemilih warna jQuery. Kami memiliki pointer untuk melacak warna pada gerakan mouse. Pada peristiwa klik palet warna, kami memilih kode warna dan menyimpannya ke objek penunjuk. Kode warna ini akan diterapkan sebagai latar belakang DIV sasaran di acara klik-nya.

<script type="text/javascript">
	var demoContent = document.getElementById("demo-content");
	demoContent.addEventListener('mousemove',function(event) {			
		$("#pointer").css({'top':event.pageY+'px','left':event.pageX+'px'});	
	});
	function applyColor(){
		$("#target").css('background-color',$("#pointer").css('background-color'));
	}
	function pickColor(id){
		$("#pointer").css('background-color',id);	
	}
</script>

Demo

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

Leave A Reply

Your email address will not be published.