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

31 March 2014 เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee

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 ขึ้นมาทีเล็กละน้อย

ค่อยมีรูปร่างหน้าตาม เป็นระบบ และซับซ้อนมากขึ้น

ยังไม่ต้องนใจถึงรายละเอียด ค่อยๆ ศึกษาไปพร้อมกัน

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