เริ่มเขียน jquery mobile

เริ่มเขียน 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 โดยสิ้นเชิงก็เยอะครับ

Create: Modify : 2010-11-06 14:57:37 Read : 17371 URL :