Color Picker เป็นเครืองมือที่เรามีไว้สำหรับการเลือกสีนะครับ เพียงแค่คลิกๆเลือกจากกล่องสีที่เราเห็นบนเว็บเราก็สามารถเอาค่าสีที่ต้องการมาใช้ได้แล้ว วันนี้เลยหยิบเอาเครื่องมือที่ใช้งานง่ายมากๆตัวหนึ่งมาแนะนำกันครับ นั้นคือ framework Javascript ของ Protoplasm
Color_picker
อันที่จริงก็เห็นมีของ JQuery อยู่นะครับ แต่พอดีคิดว่าอันนี้ก็ใช้งานง่ายไม่แพ้กันเลยขอพูดถึงซะก่อน ชื่อของเจ้า framework ตัวนี้คือ Protoplasm นะครับซึ่งก็คือ Javascript ที่มีการเรียบเรียงไว้ให้เราดึงออกมาใช้งานได้อย่างง่ายๆนั้นแหละและมี Core ในการพัฒนามาจาก Ajax framework ชื่อดังระดับโลกอย่าง Prototype
UI ที่ทาง Protoplasm จัดเตรียมไว้ให้เราใช้งานมีเยอะแยะมากมายเลยนะครับ มีทั้ง Date picker , Dialog , File chooser และ Text editor ซึงก็มีวิธีการใช้งานไม่ได้ยากเย็นเหมือนกัน แต่ไว้คราวหน้าเราค่อยมาคุยกัน วันนี้จะพูดถถึงแค่เรื่องของ Color Picker
ก่อนอื่นให้คุณเข้าไป Download ตัว Framework ได้ที่ Get Protoplasm
หลังจากนั้นคุณจะได้ File ในลักษณะของ ZIP มาให้แตกออกแล้วคุณจะได้ Folder มาเต็มไปหมด แต่คราวนี้เราจะใช้ที่ Folder ชื่อColor picker กันก่อน ไฟล์ที่จำเป็นนะครับ
- ไฟล์ชื่อ protoplasm.js
- ไฟล์ทั้งหมดใน Folder ชื่อ Color picker
จากนั้นให้เราสร้างไฟล์ขึ้นมาไฟล์หนึ่งครับแล้ว ทำการดึงไฟล์ protoplasm เข้ามา
<script language=”javascript” src=”protoplasm.js”></script>
จากนั้นให้คุณบอกกับ protoplasm ว่าจะใช้ระบบอะไรด้วยการใช้ fuction ต่อไปนี้
<script language=”javascript”>
Protoplasm.use(‘colorpicker’).transform(‘input.colorpicker’);
</script>
จะเห็นตรงด้านหลังของคำสั่ง use เราเลือกเป็น colorpicker เพราะจะดึง ui ตรงนี้เข้ามาใช้งานแล้วส่วน input.colorpicker ก็คือการดึงเอากล่องสีออกมา
Code ทั้งหมดที่ใช้จะมีหน้าตาแบบนี้ครับ
code use color picker
ทีนี้ก็จะได้หน้าตาออกมาเป็นแบบนี้นะครับ
UIcolor_picker
เป็นอันจบนะครับ ทีนี้ใครยังงอยู่ลองเอา Code ที่ผมทำไว้ทั้งหมดไปนั่งดูก่อนแล้วกันนะครับ
