ต่อเนื่องจากเนื้อหาตอนที่ 4 เมื่อมีการกำหนดลิ้งค์ เชื่อมโยง จากรายการ
ต่อไป เรามาดูการแสดงรายละเอียด เมื่อมีการคลิกลิ้งค์
ดาวโหลดไฟล์ ตัวอย่าง
การแสดงส่วนของเนื้อหา สามารถจัดรูปแบบได้หลายแบบ
ดังนี้
หัวข้อ และรายละเอียด แยกส่วน แบบแสดงติดกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน
1 2 3 4 5 6 7 8 | <div class="ui-corner-all custom-corners"> <div class="ui-bar ui-bar-a"> <h3>Heading</h3> </div> <div class="ui-body ui-body-a"> <p>หัวข้อ และรายละเอียด แยกส่วน แบบแสดงติดกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน</p> </div></div> |
หัวข้อ และรายละเอียด รวมในส่วนย่อยรายละเอียด - กำหนด theme - มุมโค้งมน
1 2 3 4 | <div class="ui-body ui-body-a ui-corner-all"> <h3>Heading</h3> <p>หัวข้อ และรายละเอียด รวมในส่วนย่อยรายละเอียด - กำหนด theme - มุมโค้งมน</p></div> |
หัวข้อ และรายละเอียด แยกกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน
1 2 3 4 | <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3><div class="ui-body ui-body-a ui-corner-all"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน</p></div> |
หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมโค้งมน
1 2 3 4 | <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3><div class="ui-body"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมโค้งมน</p></div> |
หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมไม่โค้งมน
1 2 3 4 | <h3 class="ui-bar ui-bar-a">Heading</h3><div class="ui-body"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมไม่โค้งมน</p></div> |
นอกจากนี้ เราสามารถกำหนด แต่ละส่วน เช่น
ต้องการให้ส่วนใด มีลักษณะมุม โค้งมน
สามารถเพิ่ม class ชื่อ ui-corner-all เข้า เช่น
<div class="ui-body ui-body-a ui-corner-all">
ต้องการเพิ่ม การใช้งาน เพื่อรองรับ theme
สามารถเพิ่ม class ชื่อ ui-body-a โดย a คือชื่อ theme ที่ต้องการ เช่น
<div class="ui-body ui-body-a">
ตัวอย่าง
โค้ต
ติดตามเนื้อหาใหม่ ในตอนหน้า
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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!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"> <div class="ui-corner-all custom-corners"> <div class="ui-bar ui-bar-a"> <h3>Heading</h3> </div> <div class="ui-body ui-body-a"> <p>หัวข้อ และรายละเอียด แยกส่วน แบบแสดงติดกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน</p> </div> </div> <br> <div class="ui-body ui-body-a ui-corner-all"> <h3>Heading</h3> <p>หัวข้อ และรายละเอียด รวมในส่วนย่อยรายละเอียด - กำหนด theme - มุมโค้งมน</p> </div> <br> <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3> <div class="ui-body ui-body-a ui-corner-all"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน</p> </div> <br> <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3> <div class="ui-body"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมโค้งมน</p> </div> <br> <h3 class="ui-bar ui-bar-a">Heading</h3> <div class="ui-body"> <p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมไม่โค้งมน</p> </div> </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> |
ติดตามเนื้อหาใหม่ ในตอนหน้า
