20 May 2012 06:25:24

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

02 November 2010

อ่านเนื้อหา และรายละเอียดจากเว็บไซต์ต้นฉบับ พร้อมดาวน์โหลดไฟล์ ด้วยตัวเอง ได้ที่
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>

แนะนำ การเลือกค่าสี และการใช้งาน colorpicker plugin jquery

บทความในหมวดที่่น่าสนใจ อื่นๆ

27 Oct 10 cookie กับการประยุกต์ ใช้งาน เปลี่ยน background พื้นหลัง ด้วย jQuery และ php อ่าน 1931 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1926 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1857 28 Sep 10 สร้างคำสั่ง สำหรับปุ่มควบคุม กำหนดเอง ใน google map อ่าน 1852 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1826 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 1802 11 Sep 10 จัดรูปแบบ MapTypeControlOptions ใน Google Map อ่าน 1569 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 1436 12 Sep 10 จัดรูปแบบ ScaleControlOptions ใน Google Map อ่าน 1418 24 Jun 11 แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE อ่าน 1417

บทความคนเข้าอ่านวันนี้

จำนวนผู้เยี่ยมชม 892679