MunujQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android สำหรับ jQuery mobile เป็นFramework ที่ทำงานทางด้าน UI หรือ User interface บน HTML , JavaScript และ CSS ที่เข้ามาจัดการให้สามารถแสดงผลบน Web Browser ที่อยู่ใน Mobile มือถือ Smart Phone / Tablets ต่าง ๆ เช่น iPhone , Android , Blackberry หรือiPad และอุปกรณ์อื่น ๆ ที่ได้รับความนิยม ที่มีอยู่อย่างมากมาย สำหรับ framework ตัวนี้จะเข้ามาจัดการทางด้าน Interfaceเท่านั้น ในส่วนการทำงานต่าง ๆ ก็สามารถใช้ภาษาพวก PHP , ASP.Net ทำงานตามปกติการใช้งานถือว่าง่ายมาก และยังสามารถใช้งานรวมกับ jQuery Ajax ได้แบบง่าย ๆ อีกด้วย
ในทางปฏิบัติเว็บไซต์ทั่ว ๆ ไปจะสร้างหน้าเว็บสำหรับ Web Browser ปกติอยู่แล้ว และก็สามารถแสดงผลบน Web Browserบนอุปกรณ์ Smart Phone / Tablets ได้เช่นเดียวกัน แต่ Interface อาจจะไม่เหมาะสมสำหรับแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป ฉะนั้นทางเลือกสำหรับการสร้างหน้าเพจหรือ URL สำหรับมือถือโดยเฉพาะ ก็เป็นทางเลือกหนึ่งที่เหมาะสม โดยใช้วิธีการสร้างเป็น URL อีกตัวหนึ่งสำหรับ Interface นี้โดยเฉพาะ อาจจะเป็น Sub Folder หรือ Sub Domain เช่น
Sub Folder (สร้างซับโฟลเดอร์)
Sub Domain (สร้างซับโดเมน)
สามารถเลือกใช้วิธีใดวิธีหนึ่งได้ตามสะดวก และถ้าหากต้องการให้มีการ Redirect อัตโนมัติ เมื่อเข้าจากหน้าจอเว็บปกติ สามารถดูวิธีการสร้างไฟล์ Redirect ได้จากส่วนท้ายของบทความ
OS ที่รองรับทั้งหมด ครอบคลุมตัวที่ได้รับความนิยม
– Android
– BlackBerry
– Obada
– Windows Phone
– palm webOS
– symbian
– MeeGo
Download jQuery Mobile Framework
ก่อนการเริ่มเขียนให้ดาวน์โหลด jQuery Mobile Framework มาก่อน เวอร์ชั่นที่ผมใช้เป็น 1.1.0 (Latest Stable) ซึ่งได้ผ่านการทดสอบและแก้ไข Bug ในระยะหนึ่งแล้ว แต่ถ้ามี Version ใหม่กว่านี้ก็สามารถดาวน์โหลดได้เช่นเดียวกัน แต่แนะนำให้เลือกใช้เวอร์ชั่นที่ Stable แล้ว
ไฟล์ที่ดาวน์โหลดได้แล้ว ทั้งนี้สามารถรันเพื่อดู Demo ได้จาก Web Browser ปกติได้เช่นเดียวกัน
ทดสอบการเขียนแบบง่าย ๆ
index.php (ไฟล์หลักหน้าแรก)
01.<!DOCTYPE html>02.<html>03.<head>04.<title>My Page</title>05.<meta name="viewport" content="width=device-width, initial-scale=1">06.<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />07.<script src="jquery-1.7.1.min.js"></script>08.<script src="jquery.mobile-1.1.0.min.js"></script>09.</head>10.<body>11.12.<div data-role="page">13.14.<div data-role="header">15.<h1>Welcome</h1>16.</div><!-- /header -->17.18.<ul data-role="listview" data-inset="true" data-filter="true">19.<li><a href="page1.html">Page1</a></li>20.<li><a href="page2.html">Page 2</a></li>21.</ul>22.23.<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Login user andpassword</a></p>24.25.<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">26.<li data-role="list-divider">My</li>27.<li><a href="aboutus.html">About Us</a></li>28.<li><a href="contactus.html">Contact Us</a></li>29.</ul>30.31.32.</div><!-- /page -->33.34.35.<!-- Start of third page: #popup -->36.<div data-role="page" id="popup">37.38.<div data-role="header" data-theme="e">39.<h1>Dialog</h1>40.</div><!-- /header -->41.42.<div data-role="content" data-theme="d"> 43.<h2>Login</h2>44.<form action="login.php" method="post">45.Username : <input type="text" name="user">46.Password :<input type="text" name="user">47.<br />48.<input type="submit" value="Login">49.</form>50.51.<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Close</a></p> 52.</div><!-- /content -->53.54.<div data-role="footer">55.<h4>Page Footer</h4>56.</div><!-- /footer -->57.</div><!-- /page popup -->58.59.</body>60.</html>page1.html (ไฟล์สำหรับรายละเอียดของแต่ล่ะหัวข้อ)
01.<!DOCTYPE html>02.<html>03.<head>04.<title>My Page</title>05.<meta name="viewport" content="width=device-width, initial-scale=1">06.<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />07.<script src="jquery-1.7.1.min.js"></script>08.<script src="jquery.mobile-1.1.0.min.js"></script>09.</head>10.<body>11.12.<div data-role="page">13.14.<div data-role="header">15.<h1>Page Title</h1>16.</div><!-- /header -->17.18.<div data-role="content">19.<p>Page content goes here.</p> 20.</div><!-- /content -->21.22.<div data-role="footer">23.<h4>Page Footer</h4>24.</div><!-- /footer -->25.</div><!-- /page -->26.27.</body>28.</html>โครงสร้างที่จัดเก็บ
ลองอัพโหลดเพื่อใช้งานจริง ในที่นี้ผมได้สร้าง Sub Domain บน thaicreate.com
และจะทดสอบเรียกโดย iPhone (iOS)
Screenshot
หน้าแรกเมื่อผ่าน iPhone
คลิกแต่ล่ะหัวข้อ สามารถ slide ขึ้นลง มี effect สวยงามมาก
แสดงรายละเอียดหรือ detail
อันนี้ popup login ที่สามารถสร้างได้แบบง่าย ๆ เช่นเดียวกัน
การทำ Auto Redirect เมื่อเปิดจากอุปกรณ์ Smart Phone / Tablets
สำหรับการทำ auto redirect นั้นสามารถตรวจสอบจาก Agent Web Browser หรือรุ่นของ Web Browser ซึ่งในแต่ล่ะภาษาจะมี function ในการตรวจสอบให้อยู่แล้ว แต่ผมจะยกตัวอย่างสำหรับภาษา PHP ที่ทำงานบน Linux Server โดยสามารถใช้การตรวจสอบได้ 2 วิธีคือ
1. ผ่าน .htaccess
วิธีนี้ไม่ต้องทำการแก้ไข Code ในหน้าเว็บแต่อย่างใดเพียงแต่สร้างไฟล์ .htaccess เพื่อตรวจสอบ Web Browser แล้วนำไปวางไว้ใน Server ได้เลย
.htaccess
RewriteBase /
RewriteCond %{REQUEST_URI} !^thaicreate.com.*$
RewriteCond %{HTTP_USER_AGENT} “android|blackberry|ipad|iphone|ipod” [NC]
RewriteRule ^(.*)$ http://m.thaicreate.com [L,R=302]
2. ผ่าน php โดยใช้ $_SERVER[“HTTP_USER_AGENT”]
วิธีนี้ใช้การตรวจสอบรุ่นของ Web Bowser และใช้การ Redirect ด้วย php โดยอาจจะแทรกไว้ในหน้า index.php และไว้ยังส่วนบน ๆ ของ Code
1.<?php2.if(preg_match('/android|blackberry|ipad|iphone|ipod/i', $_SERVER['HTTP_USER_AGENT'])){3.header("location:http://m.thaicreate.com/");4.exit;5.}6.?>จากทั้ง 2 วิธีเมื่อมีการเปิดด้วยอุปกรณ์ Smart Phone ที่กำหนด ก็จะมีการ Redirect ไปยัง Sub Domain และในกรณีที่มีรุ่นอื่น ๆ ก็สามารถใส่เพิ่มเข้าไปด้วยเครื่องหมาย |xxx
เพิ่มเติม
สำหรับ jQuery Mobile Framework เป็นเพียง User interface ที่ทำงานในฝั่งของ Client เพราะฉะนั้นมันสามารถนำไปใช้ได้กับการเขียนโปรแกรมหลายภาษา เช่น ASP , PHP , ASP.Net, JSP หรือ Application อื่น ๆ ที่ทำงานผ่าน Web Browserและมี Interface ที่รองรับ HTML , JavaScript และ CSS
Download Code ทั้งหมด
Download here !!!
แนะนำธีม (Themes)
เป็นธีมที่ชื่อว่า iOS Themes โดยมีลักษณะคล้ายกับ Interface บน iPhone (iOS 4 และ iOS 5) สามารถใช้งานได้ฟรีบนภายใต้เงื่อนไข MIT License
สำหรับการใช้งาน Feature อื่น ๆ สามารถอ่านได้ที่
http://jquerymobile.com/test/docs/pages/index.html
List View และการใช้งาน
ตัวอย่างเว็บไซต์ที่ใช้งาน jQuery Mobile
