PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

02 November 2010 By
เลือกค่าสี plugin jquery colorpicker

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เลือกค่าสี plugin jquery colorpicker



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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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