PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


ใช้งาน navbar เมนู หรือ รายการ link ใน jQuery Mobile ตอนที่ 3

31 March 2014 By
jquery mobile

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



navbar เมนู หรือ รายการ link จะเป็นส่วนของ link ที่ใช้เชื่อมโยงไปหน้าต่างๆ
จัดอยู่ในตำแหน่ง ได้ทั้งในส่วนของ header และ footer
 
โค้ด navbar ของเรา ที่จะใช้งาน ในการทำความเข้าใจในครั้งนี้ 
 
        <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 -->        
data-icon คือ ตัวสำหรับ กำหนด icon เรากำหนดชื่อ ตามที่ jQuery Mobile มีมาให้
ดูได้ที่ http://demos.jquerymobile.com/1.4.2/icons/
 
class="ui-btn-active"  ตัวนี้ ถ้าเราใส่ ไว้ใน link ตัวไหน link ตัวนั้น ก็จะแสดงลักษณะ กำลัง
active หรือ link นั้นถูกคลิก 
 
navbar ใส่ได้สูงสุด 5 เมนู สำหรับแถวเดียว
หากใส่มากกว่า 5 เมนู จะถูก แบ่งเป็น 2 คอลัมน์ และแสดงเป็นแถวลงมา จนเมนูแสดงหมด
 
ตัวอย่าง

 
โค้ต

<!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">
    	<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><!-- /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>
 
หากต้องการแสดง navbar ตรง footer ก็ให้นำ navbar ไปไว้ใน 
<div data-role="footer" data-position="fixed">  แทน
 
 
ตอนนี้เรากำลังประกอบ หน้าตาเพจ ของ ด้วย jQuery Mobile ขึ้นมาทีเล็กละน้อย
ค่อยมีรูปร่างหน้าตาม เป็นระบบ และซับซ้อนมากขึ้น
ยังไม่ต้องนใจถึงรายละเอียด ค่อยๆ ศึกษาไปพร้อมกัน






Tags:: jquery mobile




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

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

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

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



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



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


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