PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

01 April 2014 By Ninenik Narkdee
jquery mobile

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



ใครที่สนใจ 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




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

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



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


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