สำหรับบทความการพัฒนา 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/

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

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

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

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

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

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

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

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

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

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

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

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

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

http://i0.wp.com/www.daydev.com/wp-content/uploads/2012/08/3-8-2555-10-18-35.png?fit=615%2C314http://i0.wp.com/www.daydev.com/wp-content/uploads/2012/08/3-8-2555-10-18-35.png?resize=150%2C150Banyapon PoolsawasdBeginningDeveloperjQueryMarketing to mobileMobile TechnologyNewbieProduct InnovationsProgramming LanguageSocial Media MarketingDeveloper,HTML,Java,JQuery,jQuery Mobile,Mobile Web
สำหรับบทความการพัฒนา jQuery Mobile รอบนี้จะพาไปเรียนรู้เครื่องมือง่ายๆ อย่าง ThemeRoller สำหรับปรับแต่งสีสันของ UI ครับต่อเนื่องจากบทความ jQuery Mobile ตอนที่ 1 เริ่มต้นใช้งาน Library และตั้งค่าเบื้องต้น นะครับ คราวนี้เราจะมาเรียนรู้วิธีการเปลี่ยนธีม หรือ UI ของ Mobile Website ให้สวยงาม โดยที่เราไม่ต้องไปปวดหัวกับการเขียน หรือแก้ไข Style Sheet (CSS) เองเลยครับเพราะทางเว็บไซต์ของ jQuery Mobile นั้นมีบริการ ThemeRoller มาให้เสร็จสรรพครับ และการใช้งานนั้นก็ง่ายแสนง่ายอีกด้วย ไปลอง Take Tour กันหน่อยดีกว่าครับ ก่อนอื่นเข้าไปที่หน้าเว็บไซต์ http://jquerymobile.com/themeroller/เมื่อเข้าไปที่หน้า jQuey Mobile ThemeRoller แล้วเราจะพบหน้าจอ Sample สำหรับแก้ไข Theme หรือ CSS...