เริ่มเขียน jquery mobile
หากอยากรู้จัก jquery mobile ดีกว่านี้ต้องอ่าน jquery mobile javascript สำหรับมือถือ โดยจะเล่าความเป็นมาเอาไว้อย่างละเอียดแล้ว บทความนี้เราจะไม่เล่าอะไรกันมาก เพราะว่ามาเริ่มเขียนกันเลยจะดีกว่า
บทความนี้ จะมีโค้ด และทดสอบหน้าเว็บให้ดูด้วยนะครับ
เริ่มต้น โค้ด standard ตามที่หน้าเว็บเค้าบอกเลย มีโค้ดดังนี้
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
จะได้ผลหน้าเว็บดังนี้
บทความทั้งหมดนี้จะถูกทดสอบด้วย HTC Desire > Android 2.2 Froyo ขนาดหน้าจอ 480*800
จากโค้ดดังกล่าว เราจะแบงได้เป็น data-role="header" นั่นคือส่วน header ของเว็บ และ data-role="content" คือส่วนเนื้อหาของเว็บ สุดท้าย data-role="footer" ก็คือส่วน footer เว็บนั่นเอง
จากนั้นเราจะเริ่มเปลี่ยนสีให้กับบาร์ โดยการเพิ่ม parameter data-theme="b" class="ui-bar-b ui-header" ในส่วน header ก็จะได้โค้ดดังนี้ (เฉพาะส่วน header เท่านั้น)
<div data-role="header" data-theme="b" class="ui-bar-b ui-header">
<h1>Header B</h1>
</div>
จากนั้น เราก็จะมาเริ่มส่วน javascript กัน โดยในตอนนี้ยังมีให้เล่นไม่มาก เพราะอาจจะเป็นข้อจำกัดของอุปกรณ์ด้วย และที่มีให้ลอง ก็ยังมี bug เล็กๆน้อยๆอยู่บ้าง แต่ถือว่าสามารถทำงานได้ในระดับหนึ่งครับ
โดยจะมาเล่นกับ collapse กัน ก็คือการซ่อน และแสดงเนื้อหานั่นเอง
ให้เราแก้โค้ดส่วน content เป็นดังนี้
<div data-role="content">
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
</div>
โดยปุ่ม I'm header นั้นจะสามารถกดเพื่อซ่อนหรือแสดงเนื้อหาได้
หวังว่าเท่านี้ น่าจะได้ idea มากขึ้นแล้วสำหรับการทำหน้าเว็บเพื่อ mobile นะครับ แต่หลังจากที่ดูๆแล้ว จะพบว่าทำไมมันทำอะไรได้น้อยจังใช่หรือเปล่า ต้องไม่ลืมนะครับ ว่าการทำหน้าเว็บสำหรับมือถือนั้น ไม่ใช่หน้าเว็บสำหรับคอมพิวเตอร์ การจะเอาทุกอย่างมาอัดลงไปนั้นไม่ใช่เรื่องที่ถูกต้องแน่นอน ใส่เยอะไม่ใช่ว่าดี เพราะว่านอกจากเว็บจะเปิดไม่ยากและ ยังเละอีกด้วย จึงควร focus เอาเท่าที่จำเป็นเท่านั้น ซึ่งแนวทางการทำเว็บสำหรับมือถือก็อ่านต่อที่ แนวทางการทำเว็บสำหรับมือถือ โดยเมื่ออ่านจบแล้วก็จะพบว่า แนวทางการทำเว็บบนมือถือนั้น follow ไปในแนวทางเดียวกับที่ jquery mobile ตัวนี้กำลังเป็นอยู่อย่างถูกต้องเลย ไม่มาก และไม่น้อยจนเกินไป
สำหรับ jquery mobile ยังมีอะไรมากกว่านี้ครับ สามารถอ่านเพิ่มเติมได้ที่ http://jquerymobile.com แต่ตอนนี้เป็นตัว alpha อยู่ แต่ก็ถือว่าทำงานได้ดีระดับหนึ่งเลยครับ ดังนั้นคงต้องลองกันต่อไปครับ ตัวเต็มคงอีกไม่นานมาก
ควรพึงระลึกเสมอนะครับ ทำเว็บเพื่อสนองคนเข้าใช้ ไม่ใช่สนองเจ้าของครับ เพราะว่าบางอย่างทำออกมาสนองเจ้าของ แต่สวนทางความรู้สึกของ user โดยสิ้นเชิงก็เยอะครับ
