BeginningDeveloperjQueryMarketing to mobileMobile TechnologyNewbieProduct InnovationsProgramming LanguageSocial Media Marketing

jQuery Mobile ตอนที่ 2 เครื่องมือเปลี่ยน Theme เว็บไซต์

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

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน