แสดงส่วนของเนื้อหา แบบ แยกและรวม หัวข้อ jQuery Mobile ตอนที่ 5

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
jquery mobile

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile

ดูแล้ว 5,165 ครั้ง




ต่อเนื่องจากเนื้อหาตอนที่ 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>


ติดตามเนื้อหาใหม่ ในตอนหน้า 
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: jquery mobile







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ