สำหรับท่านที่ต้องเขียนเว็บเกี่ยวข้องกับค่าสี ให้ยูสเซอร์เลือกสีที่ต้องการ หรืออะไรก็แล้วแต่แหละที่เกี่ยวกับสี ขอแนะนำตัวเลือกสีตัวนี้

farbtastic

 

สิ่งที่จะต้องมี

Download jQuery
Download Farbtastic 1.2

วิธีการใช้งาน

สร้างไฟล์ HTML ขึ้นมาสักไฟล์

Include ไฟล์ jquery.js farbtastic.js และ farbtastic.css เข้ามา

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

สร้าง div และ textbox อย่างละตัว ตั้ง ID ให้มันด้วย

 <input type="text" id="color" name="color" value="#123456" />
 <div id="colorpicker"></div>

ใส่โค้ด jquery เข้าไปในส่วน head ของไฟล์ HTML

 <script type="text/javascript">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>

โค้ดทั้งหมด จะเป็นดังนี้

<!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" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>
<title>Farbtastic</title>
</head>
<body>
<input type="text" id="color" name="color" value="#123456" />
<div id="colorpicker"></div>
</body>
</html>

แหล่งข้อมูลอ้างอิง :

http://acko.net/dev

color Download Farbtastic DTD jQuery min
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ