ต่อเนื่องจากเนื้อหาตอนที่ 4 เมื่อมีการกำหนดลิ้งค์ เชื่อมโยง จากรายการ
ต่อไป เรามาดูการแสดงรายละเอียด เมื่อมีการคลิกลิ้งค์
ดาวโหลดไฟล์ ตัวอย่าง
การแสดงส่วนของเนื้อหา สามารถจัดรูปแบบได้หลายแบบ
ดังนี้
หัวข้อ และรายละเอียด แยกส่วน แบบแสดงติดกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน
<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 - มุมโค้งมน
<div class="ui-body ui-body-a ui-corner-all">
<h3>Heading</h3>
<p>หัวข้อ และรายละเอียด รวมในส่วนย่อยรายละเอียด - กำหนด theme - มุมโค้งมน</p>
</div>
หัวข้อ และรายละเอียด แยกกัน - หัวข้อและรายละเอียด กำหนด theme - มุมโค้งมน
<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 - มุมโค้งมน
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
<div class="ui-body">
<p>หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมโค้งมน</p>
</div>
หัวข้อ และรายละเอียด แยกกัน - หัวข้อกำหนด theme - มุมไม่โค้งมน
<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">
ตัวอย่าง
โค้ต
ติดตามเนื้อหาใหม่ ในตอนหน้า
<!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>
ติดตามเนื้อหาใหม่ ในตอนหน้า
