PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

01 April 2014 By


ใครที่สนใจ 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
ดาวน์โหลดไฟล์ ตัวอย่างได้ที่
 
http://www.ninenik.com/demo/jqmobile/jqmobile_3.rar
 
เนื้อหาส่วนนี้ เรามีการกำหนดให้ 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 เนื่องจาก การนำเสนอ ส่วนใหญ่จะเป็นการแสดงข้อมูล
เป็นรายการ เพื่อเลือก หรือคลิกเข้าไป ดูรายละเอียดเพิ่มเติม
 
โปรดติดตามตอนต่อไป

Tags:: jquery mobile

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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