การ fixed header และการใช้ listview แบบมีรูปภาพ ใน jQuery Mobile ตอนที่ 4

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

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

ดูแล้ว 6,768 ครั้ง




ใครที่สนใจ jQuery Mobile แนะนำ ล็อกอิน ค้างไว้ได้เลย ถ้าเป็นเครื่องที่ใช้งาน
ส่วนตัว ถ้ามีเนื้อหาใหม่ๆ จะได้กด ติดตาม ได้ทันที
 
ตอนที่ 4 จะเป็นการประยุกต์ ต่อเนื่องจากตอนที่ 3 เราจะเพิ่ม listview ซึ่งจะมีข้อมูล
ที่เป็นรูปภาพ ลิ้งค์เมนู รายละเอียด และหัวข้อ โค้ด listview ของเรา จะเป็นการใช้งาน
ร่วมกับคำสั่ง php เพื่อเพิ่มข้อมูลอัตโนมัติสำหรับทดสอบ
 
        <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">
 
ตัวอย่าง

 
โค้ดทั้งหมด

<!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 เนื่องจาก การนำเสนอ ส่วนใหญ่จะเป็นการแสดงข้อมูล
เป็นรายการ เพื่อเลือก หรือคลิกเข้าไป ดูรายละเอียดเพิ่มเติม
 
โปรดติดตามตอนต่อไป


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





Tags:: jquery mobile







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





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

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


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


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







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