PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี

02 November 2010 By


อ่านเนื้อหา และรายละเอียดจากเว็บไซต์ต้นฉบับ พร้อมดาวน์โหลดไฟล์ ด้วยตัวเอง ได้ที่
http://www.eyecon.ro/colorpicker/

หรือดาวน์โหลดไฟล์ ส่วนที่จำเป็น กับตัวอย่าง ประยุกต์พร้อมใช้งานได้ที่
http://www.ninenik.com/download/colorpicker.rar

รูปภาพประกอบ ตำแหน่งและการใช้งาน ส่วนต่างๆ ของจานสี

ตำแหน่งที่ 1 เลือกสีที้ต้องการ คลิกเมาส์ค้างเลื่อนขึ้น เลื่อนลง
ตำแหน่งที่ 2 เลือกโทนสี ความเข้มของสี
ตำแหน่งที่ 3 แสดงสีที่เลือกกำลังเลือก
ตำแหน่งที่ 4 แสดงสีก่อนหน้า หรือสีเริ่มต้นก่อนทำการเลือก
หากต้องการค่าสีเดิม คลิกที่ตำแหน่งที่ 4
ตำแหน่งที่ 5 คลิกเพื่อยืนยันนำสีที่เลือกไปใช้งาน

ตัวอย่างการแสดงจานสี แบบ inline หรือแสดงในตำแหน่งที่ต้องการ
ใช้เมื่อต้องการเลือกสีจากจานสีแบบทันที เมื่อได้สีที่ต้องการก็คัดลอกจาก
textbox ในจานสีที่แสดงค่าสีที่เป็นเลขฐาน 6 ไปใช้งาน
ให้แสดงแบบ inline ใน tag p id=colorpickerHolder

การแสดงจานสี แบบ inline หรือแสดงในตำแหน่งที่ต้องการ
 

 

การแสดงจานสี กำหนดค่าไว้ใน textbox
 

การแสดงจานสี กำหนดค่าไว้ใน input hidden
 


 

 

โค้ดตัวอย่างพร้อมคำอธิบาย

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery color picker</title>
<!--<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />-->
<link rel="stylesheet" href="css/custom_colorpicker.css" type="text/css" />
<style type="text/css">
/* css กำหนดรูปแบบของ textbox สำหรับจานใช้งานจานสีตามต้องการ */
.colorPicker_css{
/*	width:25px;	*/
}

/* ส่วนของ css กำหนดสำหรับจานสีใช้กับ input hidden */
.containWidget{
	position:relative;
	display:block;
	width:30px;
	height:30px;
	overflow:hidden;	
}
.colorWidget{
	position:absolute;
	cursor:pointer;	
	top:-3px;
	left:-3px;
}
</style>
</head>

<body>


<br />
การแสดงจานสี แบบ inline หรือแสดงในตำแหน่งที่ต้องการ<br />
<p id="colorpickerHolder"></p>

การแสดงจานสี กำหนดค่าไว้ใน textbox <br />
<p><input type="text" class="colorPicker_css" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" class="colorPicker_css"  maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" class="colorPicker_css"  maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>


การแสดงจานสี กำหนดค่าไว้ใน input hidden<br />
<div class="containWidget">
<img class="colorWidget" src="images/custom/select.png" border="0" />
<input name="my_color1" type="hidden" id="my_color1" value="000000" />
</div>
<br />
<div class="containWidget">
<img class="colorWidget" src="images/custom/select.png" border="0" />
<input name="my_color2" type="hidden" id="my_color2" value="ff0000" />
</div>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(function(){

	// ให้แสดงแบบ inline ใน tag p id=colorpickerHolder
	$('#colorpickerHolder').ColorPicker({ // 
		flat: true, // กำหนดให้แสดงแบบ inline
		color:'#000000' // ค่าสีเริ่มต้นที่แสดง
	});	


	//  ส่วนของการแสดงจานสี กำหนดค่าไว้ใน textbox
	// วนลูปกำหนดค่าสีพื้นหลังของ textbox ให้เท่ากับค่าของ textbox นั้นๆ
	$('.colorPicker_css').each(function(){
		$(this).css("background","#"+$(this).val());
	});	
	// กำหนดให้ textbox ที่มี class=colorPicker_css แสดงจานสีเมื่อคลิก
	$('.colorPicker_css').ColorPicker({
		livePreview:true, // เมื่อพิมพ์ขณะแสดงค่าสี ให้จานสีเปลี่ยนสีที่เลือกตามค่าที่พิมพ์
		onBeforeShow: function () { // ฟังก์ชันทำงานก่อน ทำการเลือกค่าสี
			$(this).css("background","#"+$(this).val()); //เปลี่ยนสีพื้นหลังให้เท่ากับค่าใน textbox นั้นๆ
			$(this).ColorPickerSetColor(this.value); //กำหนดค่าสีเริ่มต้นในจานสี 
		},
		onSubmit: function(hsb, hex, rgb, el){ // ฟังก์เมื่อทำการเลือกค่าสีแล้ว
			$(el).val(hex); //ให้ค่าของ textbox เท่ากับค่าสีที่เลือก
			$(el).css("background","#"+hex); // เปลี่ยนสีพื้นหลัง textbox ให้เท่ากับค่าสีที่เลือก
			$(el).ColorPickerHide(); //ปิดจานสี
		}	
	})
	.bind('keyup', function(){ //เพิ่ม event เมื่อพิมพ์ที่ textbox 
		$(this).ColorPickerSetColor(this.value); // ให้กำหนดค่าเริ่มต้นจานสี เป็นค่าใน textbox
	});
	


	// การแสดงจานสี กำหนดค่าไว้ใน input hidden	
	// วนลูปกำหนดค่าสีพื้นหลังของ ปุ่มเลือกค่าสี ให้เท่ากับค่าของ input hidden ด้านหลัง 
	$('.colorWidget').each(function(){
		$(this).css("background","#"+$(this).next("input").val());
	});	
	// กำหนดให้ ปุ่มเลือกค่าสี ที่มี class=colorWidget แสดงจานสีเมื่อคลิก	
	$(".colorWidget").ColorPicker({ 
//		eventName:'mouseover', //อาจกำหนดเป็น mouseover  ค่าเริ่มต้นคือ เมื่อคลิกเมาส์ 'click'		
		onBeforeShow: function () { // ฟังก์ชันทำงานก่อน ทำการเลือกค่าสี
			$(this).ColorPickerSetColor($(this).next("input").val()); // กำหนดค่าสีเริ่มต้นเท่ากับค่าใน input hidden
		},
		onSubmit: function(hsb, hex, rgb, el) { // ฟังก์เมื่อทำการเลือกค่าสีแล้ว
			$(el).css("background","#"+hex); //กำหนดสีพื้นหลังให้กับปุ่มเลือกค่าสี เท่ากับ ค่าสีที่เลือก
			$(el).next("input").val(hex); // กำหนดค่าสีที่เลือกให้กับ input hidden
			$(el).ColorPickerHide(); //ปิดจานสี
		}
	});


	
//		event อื่นๆ เพิ่มเติมหากต้องการใช้งาน
//		onShow function ฟังก์ชันเรียกใช้เมื่อจานสีแสดง
//		onBeforeShow function ฟังก์ชันเรียกใช้ก่อนจานสีจะแสดง
//		onHide function ฟังก์ชันเรียกใช้เมื่อปิดจานสี
//		onChange function ฟังก์ชันเรียกใช้เมื่อเปลี่ยนสี
//		onSubmit function ฟังก์ชันเรียกใช้เมื่อเลือกสีที่ต้องการ
	
	
});
</script>
</body>
</html>

 


Tags:: jquery colorpicker plugin เลือกค่าสี





URL สำหรับอ้างอิง