ตอนที่ 2 จะเป็นการสร้าง panel หรือ แถบเมนูด้านซ้าย ขวา
ในเนื้อหานี้ เราจะรู้จัก วิธี
1. การใช้งาน panel
2. การใช้งาน link และ icons
3. การใช้งาน listview สำหรับแสดง ใน panel
ดาวน์โหลดไฟล์ตัวอย่าง ตอนที่ 2 ได้ที่
ก่อนอื่นเราเริ่มต้น ที่หน้าแรก ว่างเปล่า ตามโค้ต ex2.php
ตัวอย่างหน้าแรก ว่างเปล่า
โค้ต
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header"> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --> </div><!-- /page --></body></html> |
1. การใช้งาน panel
1 2 3 | <div data-role="panel" data-display="push"></div><!-- /panel --> |
ให้แทรกโค้ด ส่วนของ panel ไว้ ก่อน หรือ หลัง
ของส่วนเนื้อหา <div data-role="content">
ในที่นี้จะแทรกไว้ด้านหลัง และก่อน <div data-role="footer" data-position="fixed">
และกำหนด id ให้กับ panel สำหรับใช้อ้างอิงใช้งาน จะได้เป็น
1 2 3 | <div data-role="panel" id="left_panel" data-display="push"></div><!-- /panel --> |
โค้ต
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header"> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --> </div><!-- /page --></body></html> |
2. การใช้งาน link และ icons
1 | <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> |
link และ icon ที่จะสร้าง เป็นส่วนสำหรับเรียกใช้งาน ให้แสดง panel
ดูผลลัพธ์ รายละเอียดปลีกย่อย ค่อยศึกษา ทำความเข้าใจ เพิ่มในภายหลัง
href="#left_panel" ส่วนนี้ สำหรับอ้างอิง ใช้งาน id ของ panel ที่เรากำหนด ก่อนหน้า
เราจะแทรกเมนู link นี้ ในส่วนของ header
ตัวอย่าง
โค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --> </div><!-- /page --></body></html> |
3. การใช้งาน listview สำหรับแสดง ใน panel
เมื่อเราสามารถแสดง panel แล้ว ต่อไปเรา จะให้ panel
นั้นแสดง แสดงเมนู โดยเราจะใช้งาน listview โดยเมนูใน listview
จะไม่แสดง icon ตามโค้ดด้านล่าง
โดยเอาโค้ต listview นี้ไปแทรกเข้าไปใน panel
1 2 3 4 5 6 7 8 9 10 | <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li></ul> |
ตัวอย่าง
โค้ต
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --> </div><!-- /page --></body></html> |
จบ ตอนที่ 2 เราจะเห็นหน้าตา ของ การใช้งาน panel และการแสดงเมนู
รายละเอียด ปลีกย่อย ในแต่ละส่วน จะอธิบายเพิ่มเติมต่อไป ในตอนนี้
ให้เราดูภาพรวมไปก่อน ว่า jquery mobile ทำอะไรได้บ้าง แสดงแบบไหนได้บ้าง
รอติดตาม เนื้อหา ตอนต่อไป
