ใครที่สนใจ jQuery Mobile แนะนำ ล็อกอิน ค้างไว้ได้เลย ถ้าเป็นเครื่องที่ใช้งาน
ส่วนตัว ถ้ามีเนื้อหาใหม่ๆ จะได้กด ติดตาม ได้ทันที
ตอนที่ 4 จะเป็นการประยุกต์ ต่อเนื่องจากตอนที่ 3 เราจะเพิ่ม listview ซึ่งจะมีข้อมูล
ที่เป็นรูปภาพ ลิ้งค์เมนู รายละเอียด และหัวข้อ โค้ด listview ของเรา จะเป็นการใช้งาน
ร่วมกับคำสั่ง php เพื่อเพิ่มข้อมูลอัตโนมัติสำหรับทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ul data-role="listview" data-icon="false" data-inset="true"><?php for($i=1;$i<=5;$i++){?> <li><a href="#"> <img src="images/pic1.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li> <li><a href="#"> <img src="images/pic2.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li> <li><a href="#"> <img src="images/pic3.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li><?php } ?> </ul> |
จะพบว่าเรามีการใช้งานรูปเข้ามาในการทดสอบ อยู่ในโฟลเดอร์ images
ดาวน์โหลดไฟล์ ตัวอย่างได้ที่
เนื้อหาส่วนนี้ เรามีการกำหนดให้ fixed ตำแหน่งของ header ด้วย
data-position="fixed"
ใช้เป็น
<div data-role="header" data-position="fixed">
และลิ้งค์ใน listview เราจะไม่มีการแสดง icons โดยกำหนด data-icon="false"
ใช้เป็น
<ul data-role="listview" data-icon="false" data-inset="true">
ตัวอย่าง
โค้ดทั้งหมด
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!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" data-position="fixed"> <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 data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li> <li><a href="#" data-icon="calendar">เมนู 2</a></li> <li><a href="#" data-icon="audio">เมนู 3</a></li> <li><a href="#" data-icon="alert">เมนู 4</a></li> <li><a href="#" data-icon="gear">เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-icon="false" data-inset="true"><?php for($i=1;$i<=5;$i++){?> <li><a href="#"> <img src="images/pic1.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li> <li><a href="#"> <img src="images/pic2.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li> <li><a href="#"> <img src="images/pic3.jpg"> <h2>หัวข้อ</h2> <p>รายละเอียด</p></a> </li><?php } ?> </ul> </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> |
เราศึกษา listview เนื่องจาก การนำเสนอ ส่วนใหญ่จะเป็นการแสดงข้อมูล
เป็นรายการ เพื่อเลือก หรือคลิกเข้าไป ดูรายละเอียดเพิ่มเติม
โปรดติดตามตอนต่อไป
