สำหรับบทความการพัฒนา jQuery Mobile รอบนี้จะพาไปเรียนรู้เครื่องมือง่ายๆ อย่าง ThemeRoller สำหรับปรับแต่งสีสันของ UI ครับต่อเนื่องจากบทความ jQuery Mobile ตอนที่ 1 เริ่มต้นใช้งาน Library และตั้งค่าเบื้องต้น นะครับ คราวนี้เราจะมาเรียนรู้วิธีการเปลี่ยนธีม หรือ UI ของ Mobile Website ให้สวยงาม โดยที่เราไม่ต้องไปปวดหัวกับการเขียน หรือแก้ไข Style Sheet (CSS) เองเลยครับเพราะทางเว็บไซต์ของ jQuery Mobile นั้นมีบริการ ThemeRoller มาให้เสร็จสรรพครับ และการใช้งานนั้นก็ง่ายแสนง่ายอีกด้วย ไปลอง Take Tour กันหน่อยดีกว่าครับ ก่อนอื่นเข้าไปที่หน้าเว็บไซต์ http://jquerymobile.com/themeroller/

เข้าไปที่หน้าเว็บไซต์ http://jquerymobile.com/themeroller/

เมื่อเข้าไปที่หน้า jQuey Mobile ThemeRoller แล้วเราจะพบหน้าจอ Sample สำหรับแก้ไข Theme หรือ CSS อยู่ให้เราเข้าไปเลือกที่เมนู A หรือ B หรือ C ก็ได้ที่ด้านซ้ายบนครับ เมื่อเลือกแล้ว ลองเล่นปรับค่าต่างๆ ของ Component ดูครับ จะเห็นว่าหน้าจอการแสดงผลจะทำงานแสดงผลออกมาให้เห็นได้ทันทีครับ

แก้ไข ชุดสีของ UI กันหน่อย 

เมื่อทำการแก้ไขชุดสีจนพอใจแล้วให้เข้าไปที่เมนูด้านบนครับ เลือกแมนู “Download” ได้เลย ไฟล์ UI ทั้งหมดจะถามว่าเรา ชื่อธีมนี้ชื่ออะไร ให้ใส่ชื่อธีมเข้าไปแล้วทำการดาวน์โหลดลงเครื่องของเราครับ

กำหนดชื่อ ธีม แล้วทำการดาวน์โหลด

ทำการแตกไฟล์ Zip ออกมา

ให้ลองทดสอบ โดยการรันไฟล์ index.html บนเว็บบราวเซอร์ดูครับ

ลองรันดูหน่อย

เพียงเท่านี้ก็จะเห็นว่าเราสามารถเล่น jQuery Mobile กับธีมของเราได้อย่างสมบูรณ์แบบแล้วใช่ไหมครับ หวังว่าบทความนี้คงช่วยเหลือใครหลายๆ คนกับการเปลี่ยน UI กันให้ไม่ต้องปวดหัวกับ CSS นะครับ

Contributors: Banyapon Poolsawasd

Social Media Marketing และที่ปรึกษาด้านการตลาดออนไลน์ มีงานวิจัยด้านนวัตกรรมออนไลน์ และโครงงานด้านเทคโนโลยี Social Integration และ Augmented Reality ร่วมทั้งในประเทศ และต่างประเทศ รวมถึงตำแหน่งอาจารย์พิเศษ ประจำมหาวิทยาลัยชั้นนำ และวิทยากรพิเศษ นักวิจัย นักคิด

• View all posts by Banyapon Poolsawasd →
• Blog
• Twitter
• Facebook
• Google+

บทความนี้ใช้ Skills ด้าน เทคนิค อะไรของคุณบ้าง